前言
在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組件
完成