​

 前言

在vue專案中使用swiper+vue-awesome-swiper實現一個上下滾動的跑馬燈/新聞列表/圖片列表，有資料時展示列表，沒資料時自定義說明。

效果如下：一個頁面中展示4個列表（或圖片）,列表向上滾動，滑鼠移入停止滾動且顯示title，滑鼠移出滾動再次開啟，有分頁

當沒有資料時，頁面會顯示“當前一切正常

元件和注意事項

[email protected][email protected]

在vue專案中，滾動列表用的是vue-awesome-swiper，因為awesome-swiper依賴於swiper，所以二者都需要下載

[email protected]的配置項用法和內容，可檢視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 [email protected] -save
npm install [email protected] -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元件

import AwesomeSwiper from '@/components/scroll/awesome-swiper' 
<AwesomeSwiper :swiperData="diData" :pClass="'di'"></AwesomeSwiper>

完成

​