原因是版本更新,之前的写法是:
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=new BScroll(this.$refs.slider,{
scrollX:true,
scrollY:false,
momentum:false,
snap:
{
loop:this.loop,
snapThreshold:0.3,
snapSpeed:400
},
click:true
})
在使用自动播放的时候,会出现的一种情况是,播放到最后一页的时候,无法自动跳转到第一页,播放的函数是:
play() {
let pageIndex = this.currentPageIndex + 1
if (this.loop) {
pageIndex += 1
}
this.timer = setTimeout(() => {
this.slider.goToPage(pageIndex, 0, 400)
}, this.interval)
}
改进为:
play(){
this.timer = setTimeout(()=>{
this.slider.next()
},this.interval)
}
解决了上述问题后,出现的一种情况是点击图片后无法进行跳转,原因是与fastclick的点击事件有冲突,搜罗了网上的解决办法
首先方法一:
//1.在使用better-scroll的地方增加如下代码
import BScroll from 'better-scroll'
export default {
props: {
probeType: {
type: Number,
default: 1
},
click: {
type: Boolean,
default: true//确实需要点击事件
},
//2.在<img>标签中增加class="needscilck"
<img class="needsclick" :src="item.picUrl">
但是我使用上述办法并没有解决,找到了方法二:
this.slider=new BScroll(this.$refs.slider,{
scrollX:true,
scrollY:false,
momentum:false,
snap:
{
loop:this.loop,
snapThreshold:0.3,
snapSpeed:400
},
tap:true,
click:true
})
//在初始化时增加了tap:true以及click:true后可以实现跳转