BetterScroll 2.0网络数据过慢,不能滚动问题

BetterScroll 2.0网络数据过慢,不能滚动问题

问题所在

从网络加载过来的数据,特别是大图,加载速度过慢,导致图像的高度没有实际的显示,因此better-scroll计算不上图像的高度,因此导致BScroll无法正常滚动。

官方的办法

官方在“疑难杂症”模块中介绍了无法监听图片是否加载完成的方案。
解决办法就是:
在图片的 onload 的回调函数里面调用 bs.refresh() 来确保得到正确的图片高度之后再计算可滚动的高度。
问题在于富文本内容给图片添加load方法非常的麻烦,所以这个办法对富文本来讲不容易实现。

解决办法

在初始化代码内添加pullingUp方法,代码如下:

//引入BS基础组件
import BScroll from '@better-scroll/core'
//引入pullup上拉加载插件
import PullUp from '@better-scroll/pull-up'
BScroll.use(PullUp)

//初始化BS
initScroll(){
     this.bscroll=new BScroll(this.$refs.showMain,{                
         click:true,
         pullUpLoad: true
     })
     this.bscroll.on('pullingUp', this.pullingUpHandler)
 },
 //上拉操作 当DOM 结构发生变化的时候 重新计算 BetterScroll
 pullingUpHandler(){            
     this.bscroll.refresh()
 }

核心代码就在refresh()方法,用户上拉操作的时候重新运行BScroll,让后续DOM内容置入,实现顺畅的滑动效果。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咸虾米_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值