vue-awesome-swiper

 

本文地址：https://www.cnblogs.com/veinyin/p/9370113.html 

聊起輪播就會想到 swiper，作為一個強大的輪播插件，當然有人為 Vue 進行二次封裝，那就是 vue-awesome-swiper

使用方法如下

 

第一步  

npm install vue-awesome-swiper --save

　　

第二步

import {
    swiper,
    swiperSlide
} from 'vue-awesome-swiper'

　　

第三步

swiper(:options="swiperOption" ref="mySwiper")
    swiper-slide
    swiper-slide
    swiper-slide　　

以上這些步驟應該是沒有問題的

 

下面依次介紹如何書寫配置項、如何調用 swiper 方法、如何回調

第四步  配置項

在 data 的 swiperOption 中寫配置項，比如

data() {
    return {            
       swiperOption: {
           notNextTick: true,
           direction: 'vertical'
       },
    }
}

上面是很簡單的一個示例，其他配置項繼續寫在 swiperOption 里就可以了

 

第五步  swiper 方法

computed: {
    swiper() {
         return this.$refs.mySwiper.swiper
    },        
}

這里得到了 swiper，可以調用 swiper 方法

比如，有三個按鈕，分別對應三個輪播頁，點擊按鈕輪播顯示到對應頁，這時可以給按鈕綁定方法，在 methods 中這樣寫

clickActiveType(index){
    this.swiper.slideTo(index,300,false)
}　　

上面主要是展示怎樣調用 swiper 方法，其他方法都是類似的

 

第六步  swiper 回調

swiper4 的文檔里面是把回調方法放到 key 為 on 的對象里，但我在使用時是不起作用的，如下所示才可以

swiperOption: {
    ...
    onSlideChangeEnd: (swiper) => { 
        console.log(swiper.activeIndex) 
    }
}

　　

最初格式如下

swiperOption: {
    ...
    on: {
        onSlideChangeEnd: (swiper) => {
            console.log(swiper.activeIndex)
        }
    }
}

區別就在與是不是放在對象里

 

其他  鼠標滾輪控制輪播播放

swiper4 的 mousewheel 設為 true 不起作用，抱着試試看的想法，將 swiper3 的相應屬性 mousewheelControl 設為 true 就可以了

 

 

 

 END~~~≥ω≤