swiper 在 vue 中的應用(以3.0爲例)

1、使用方法
官網地址
參考此文章(點擊我)
2、常見狀況html

  • 圖片須要動態獲取時

    待數據加載成功且渲染完畢後,進行節點初始化。例:ios

axios.post(‘接口地址’, 參數).then(response => {   
    this.pages = response.data; //pages 渲染數據的數組
    this.$nextTick(() => { //渲染結束
        // mySwiper 裏面的屬性按需配置,詳情見官網
        let mySwiper = new Swiper(".swiper-container", { 
            initialSlide :0,//默認播放(值爲圖片下標)
            loop: false,//不循環
            speed: 600, //切換速度
            paginationClickable: true, //點擊小點能夠切換
        });
      });
});
  • 當有 3 組圖片須要依次播放時(多組以此類推)
    情景:第 2 組圖片滑動最後一張時,須要加載第 3 組圖片;第 2 組圖片滑動第一張時,須要加載第 1 組圖片。
    方法:在初始化的時候,配置回調函數onTouchStart(開始滑動的X軸值)和 onTouchEnd(結束滑動的X軸值)。用差值來判斷是往前滑仍是日後劃。axios

    this.$nextTick(() => {
       let mySwiper = new Swiper(".swiper-container", {
         observer: true, //修改swiper本身或子元素時,自動初始化swiper
         observeParents: true, //修改swiper的父元素時,自動初始化swiper         
         onTouchStart: function(swiper) {
           this.positionStart = swiper.getWrapperTranslate();
         },
         onTouchEnd: function(swiper) {
           this.positionEnd = swiper.getWrapperTranslate();
           if (this.positionStart > this.positionEnd && this.pages.length - 1 == this.mySwiper.activeIndex) { 
               //向後滑,加載後一組圖片              
           } else if (mySwiper.activeIndex == 0 && this.positionStart < this.positionEnd) {
               //向前劃,加載前一組圖片   
           }
         }
       });
     });

這時,圖片已經加載了另一組圖片,可是各組圖片之間沒有連貫起來,這就須要用到 slideTo方法去跳轉(若加載第 3 組,則跳轉到下標第 0 個;若加載第 1 組,則跳轉到下標第 圖片個數-1 個)。api

mySwiper.slideTo('要跳轉的圖片下標', 10, false) // 10表示跳轉速度;false 表明是否觸發回到函數
相關文章
相關標籤/搜索