前言
在vue项目中使用swiper+vue-awesome-swiper实现一个上下滚动的跑马灯/新闻列表/图片列表，有数据时展示列表，没数据时自定义说明。
效果如下：一个页面中展示4个列表（或图片）,列表向上滚动，鼠标移入停止滚动且显示title，鼠标移出滚动再次开启，有分页
当没有数据时，页面会显示“当前一切正常
组件和注意事项
vue+swiper@4.5.1+vue-awesome-swiper@2.6.7
在vue项目中，滚动列表用的是vue-awesome-swiper，因为awesome-swiper依赖于swiper，所以二者都需要下载
vue-awesome-swiper@2.6.7的配置项用法和内容，可查看swiper3官网API，地址如下：
https://3.swiper.com.cn/api/index.html
注意版本，不同swiper版本的配置写法不同，经查阅4或5版本是比较稳定。其余版本可能会造成缺陷，所以仅供参考！
注意API，不同版本vue-awesome-swiper对应的swiper不一样，导致同一个事件的事件名并不同，比如鼠标移入hover停止滚动事件，常见解答用swiper.autoplay.stop()但在该项目没有用，这就要考虑一下版本问题。
想知道那个版本，可以，打印swiper的dom，debugger查看this.$refs.mySwiper.swiper带的方法，在2.6.7版本中发现了
stopAutoplay，网上搜索stopAutoplay就找到了swiper3的文档
代码分解
下载
npm install vue-awesome-swiper@2.6.7 -save
npm install swiper@4.5.1 -save
引入
//main.js import 'swiper/dist/css/swiper.css' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)
awesomeSwiper组件封装
<template>
<div class="slide-box" @mouseenter="mouseEnterHandler"
@mouseleave="mouseLeaveHandler"
>
<template v-if="spShow">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(slide, index) in swiperData" :key="slide.id" class="swiperSlide">
<div class="swiperContent" :title="slide.content">{{slide.content}}</div>
</swiper-slide>
</swiper>
<div :class="pClass+'swiperPagination'" class="swiperPagination"></div>
</template>
<template v-else>
<div class="noErrorStyle">当前运行正常！</div>
</template>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
props:{
swiperData:{
type:Array,
default:[]
},
pClass:{
type:String,
default:''
}
},
data(){
return {
// 配置项含义，参考文档swiper3
swiperOption: {
notNextTick: true,
direction:'vertical',
setWrapperSize: true,
freeMode:true,//true则是自由模式，不会自动贴合滑动位置
autoplay:4000,//切换时间间隔
//loop:true,//循环
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
spaceBetween:10,//slide之间的距离，px
slidesPerView:4 ,//slide可见数量
mousewheelControl : true,//鼠标滚轮控制
grabCursor:true,//鼠标变为抓手
preventClicksPropagation:false,
//pClass是父组件传入的，独一无二的class能保证swiper组件是独立的。即保证一个页面多处调用该swiper组件
//时，swiper分页不会相互影响。在没有pClss时，一个页面多处调用swiper，这些swiper分页会互相影响导致
//混乱
pagination:'.'+this.pClass+'swiperPagination',
paginationClickable:true ,
// 自定义分页样式
paginationBulletRender:function (swiper, index, className) {
return '<span class=" + className + ">' + (index + 1) + '</span>';
},
},
spShow:false//默认为ture将不会显示自定义内容
}
},
components: {
swiper,
swiperSlide
},
watch:{
swiperData:{
handler(){
if(this.$refs.mySwiper){
this.$refs.mySwiper.swiper.update(true)//更新
}
}
},
'swiperData.length':{
handler(newValue,oldValue){
// 有数据显示swiper，没数据显示自定义内容
if(newValue>0){
this.spShow=true
}else{
this.spShow=false
}
if(this.$refs.mySwiper){
this.$refs.mySwiper.swiper.update(true)
}
}
}
},
methods:{
mouseEnterHandler(){
if(this.$refs.mySwiper){//鼠标移入停止滚动
this.$refs.mySwiper.swiper.stopAutoplay()
}
},
mouseLeaveHandler(){
if(this.$refs.mySwiper){//鼠标移出开始滚动
this.$refs.mySwiper.swiper.startAutoplay()
}
},
},
}
</script>
<style lang="scss" scoped>
.slide-box{
width: 100%;
height: 100%;
color:#fff;
}
.swiper-container{
height: 96%;
}
.swiperSlide{
height:33px;
width: 96%;
background: rgba(35, 37, 165,0.2);
border-left:3px solid rgb(199, 218, 35);
border-right:3px solid #efbc4a;
font-size: 13px;
color: rgb(245, 245, 245);
position: relative;
left: 50%;
transform: translateX(-50%);
padding: 5px 10px;
box-sizing: border-box;
border-radius: 6px;
box-shadow: #020c3b 1px 2px 2px;
}
.swiperPagination{
height: 3%;
text-align: center;
}
.noErrorStyle{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
vue中使用awesomeSwiper组件
完成