问题所在
从网络加载过来的数据,特别是大图,加载速度过慢,导致图像的高度没有实际的显示,因此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内容置入,实现顺畅的滑动效果。