Vue 和 Better-scroll 构造轮播图遇到的坑

用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两个来实现无缝轮播。

_initDots 的执行顺序一定要在 _initSlider 前面

4.改变窗口大小，导致轮播失效，窗口大小不对的问题

这个就直接贴代码吧

        //window监听 resize ->窗口大小改变事件
        window.addEventListener('resize', ()=>{
            if(!this.slider){
                return
            }
            //调用该方法，重新计算页面宽度，生成新的轮播图容器大小
            this._setSliderWidth(true);
            //在宽度改变之后，通过调用slider.refresh() 来更新下slider
            //但是不能从电脑端到手机端的转换，转换依旧是有问题的。
            this.slider.refresh()
            
        })
复制代码

转载于:https://juejin.im/post/5bbc3b17f265da0aed563bcf