使用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.在<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后可以实现跳转

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值