使用better-scroll无法进行无缝切换的原因与自动播放的冲突、与fastclick的点击冲突

原因是版本更新,之前的写法是:

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.在标签中增加class="needscilck"
 

但是我使用上述办法并没有解决,找到了方法二:

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后可以实现跳转

 

你可能感兴趣的:(使用better-scroll无法进行无缝切换的原因与自动播放的冲突、与fastclick的点击冲突)