最近在学习vue,就找了一个项目学习vue构建音乐app,在使用better-scroll写无缝轮播图的时候踩到了一个大坑找了好久才找到问题所在。。。。。
1,如果better-scroll的版本是 "better-scroll": "^0.1.15"时,即低版本时 对于BScroll的配置如下 new BScroll(this.$refs.slider, { scrollX: true, scrollY: false, momentum: false, snap: true, snapLoop: this.loop, snapThreshold: 0.3, snapSpeed: 400 }) 在自动播放的方法中写 this.slider.goToPage(pageIndex, 0, 400) 完整代码如下 _initSlider() { this.slider = new BScroll(this.$refs.slider, { scrollX: true, scrollY: false, momentum: false, snap: true, snapLoop: this.loop, snapThreshold: 0.3, snapSpeed: 400 }) this.slider.on('scrollEnd', () => { let pageIndex = this.slider.getCurrentPage().pageX if (this.loop) { pageIndex -= 1 } this.currentPageIndex = pageIndex if (this.autoPlay) { this._play() } }) this.slider.on('beforeScrollStart', () => { if (this.autoPlay) { clearTimeout(this.timer) } }) }, _play() { let pageIndex = this.currentPageIndex + 1 if (this.loop) { pageIndex += 1 } this.timer = setTimeout(() => { this.slider.goToPage(pageIndex, 0, 400) }, this.interval) } 2,如果better-scroll的版本是新版本的话 "better-scroll": "^1.10.2", BScroll的配置如下 new BScroll(this.$refs.slider, { scrollX: true, scrollY: false, momentum: false, snap: { loop: this.loop, threshold: 0.3, speed: 400 }, click: true });即snap要写成对象的形式,在自动播放中的配置要把goToPage(pageIndex, 0, 400)换成next()并且把scrollEnd中的 if (this.loop) { pageIndex -= 1 } 去掉,防止小圆点和图片对不上 完整代码如下 initSlider() { this.slider = new BScroll(this.$refs.slider, { scrollX: true, scrollY: false, momentum: false, snap: { loop: this.loop, threshold: 0.3, speed: 400 }, click: true }); this.slider.on("scrollEnd", () => { let pageIndex = this.slider.getCurrentPage().pageX; this.currentPageIndex = pageIndex; if (this.autoPlay) { clearTimeout(this.timer); this._Play(); } }); }, _Play() { let pageIndex = this.currentPageIndex + 1; if (this.loop) { pageIndex += 1; } this.timer = setInterval(() => { this.slider.next() }, this.interval); }
第一次写博客园,有很多不会的写的不好的希望大家可以指正,共同学习