better-scroll在vue中使用出现的不滑动问题

今天在vue中使用better-scroll时,发现第一次加载后页面无法滚动。

去查了相关问题后发现了 一大堆的解决方案,汇总后:

  1. 首先检查代码,content高度是否大于warpper、样式是否写错,
  2. 确认代码没有问题的情况下,可以考虑是否是,Dom加载问题,因为如果BetterScroll无法计算出高度,会出现这个问题,可以通过nextTick()或者在scroll事件中添加refresh()方法来重新计算高度

添加refresh附上代码: 

  mounted() {
 //  ref绑定在组件中通过$refs.refname获取到是一个组件对象 组件对象  <cpn ref='a=>
 // ref绑定在普通元素中,那么通过$refs.refname获取到的是一个元素对象 在组件内部书写时添加属性
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: 3,
        pullUpLoad: true,
        click: true
      });
      // 重新计算 BetterScroll,当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常
      this.scroll.on('pullingUp', () => {
        this.scroll.refresh()
      })
  },

nextTick附上代码:

   this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: 3,
        pullUpLoad: true,
        click: true
      });
   
    });

在使用过程中,nextTick不起作用,可能是因为没有更新数据吧,我是用refresh()解决的

nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值