vue 实现无限轮播_vue使用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().pageXif (this.loop) {

pageIndex-= 1}this.currentPageIndex =pageIndexif (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);

}