Vue 和 Better-scroll 構造輪播圖遇到的坑

MRHE發表於2018-10-09
Vue
用better-scroll 元件，寫輪播圖遇到了幾個坑，總結一下，各位看官看看就行了，有幫助更好

1.建構函式的傳參問題

 輪播圖的無法輪播問題的解決。snap引數的配置在新版本里面發生，寫法如下圖。

this.slider = new BScroll(this.$refs.slider, {
                scrollX: true,
                scrollY: false,
                momentum: false,//快速滾動時不開啟滑動慣性
                //新版本寫法
                snap: {
                    loop: this.loop,
                    threshold: 0.3,
                    speed: 400
                },
    
                //老版本寫法
                // snap: true,
                // snapLoop: this.loop,
                // snapThreshold: 0.3,
                // snapSpeed: 400,
                // click: true
                
            })
複製程式碼

2.自動輪播時：最後一頁無法跳轉的問題

 新版本中如果使用 slider.goTopage（Xindex，Yindex ，time） time 為切換圖片的時間。最後一頁跳轉到第一頁的時候，會出現經過所以圖片的問題，不是預想的一張一張的切換，而且最後一張 ->第一張這樣的一個切換，效果不理想。
使用 slider.next() 就可以解決這個問題，這個只是跳轉一下頁，到了最後一頁的時候再次執行這個，better-scroll 會自動的實現了最後一頁到首頁的切換。

_play(){
            
            // let pageIndex = this.currentPageIndex + 1
            // if(pageIndex == this.dots.length ){
            //     console.log('inter')
            //     pageIndex = -1
            // }
            /*使用next -> 跳轉下一個頁面。可以實現無縫輪播 。
            使用 goTopage 是跳轉到指定index的圖片，這樣還會出現最後一頁無法輪播的情況，
            自己處理 index的話 ，達不到完美的無縫輪播*/
            
            this.timer = setTimeout( () =>{
                this.slider.next()
            },this.interval)
        },
複製程式碼

3.建立輪播圖dots（就是輪播圖下面表示頁碼的小點）多出來的問題

  解決辦法：建立dots 的程式碼一定要再 構造better-scroll 例項後面，構造better-scroll例項時，會給頁面加首尾的圖片cope兩個來實現無縫輪播。

Vue 和 Better-scroll 構造輪播圖遇到的坑

_initDots 的執行順序一定要在 _initSlider 前面

4.改變視窗大小，導致輪播失效，視窗大小不對的問題

這個就直接貼程式碼吧

        //window監聽 resize ->視窗大小改變事件
        window.addEventListener('resize', ()=>{
            if(!this.slider){
                return
            }
            //呼叫該方法，重新計算頁面寬度，生成新的輪播圖容器大小
            this._setSliderWidth(true);
            //在寬度改變之後，通過呼叫slider.refresh() 來更新下slider
            //但是不能從電腦端到手機端的轉換，轉換依舊是有問題的。
            this.slider.refresh()
            
        })
複製程式碼


相關文章