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 表明是否觸發回到函數