解决Better-Scroll可滚动区域的问题
Better-Scroll在决定有多少区域可以滚动时,是根据scrollerHeight属性决定
- scrollerHeight属性石根据放Better-Scroll的content中的子组件的高度
- 但是页面刚开始加载,计算scrollerHeight属性的时候,由于图片加载较慢,就会将图片的高度不计算在内,所以计算出来的是错误高度
- 后来图片加载进来之后就有了新的高度,但是scrollerHeight属性并没有进行更新,所以滚动会出现问题,
如何决绝Better-Scroll出现的可滚动区域问题? - 监听每一张图片是否加载完成,只要有一张图片加载完成了就执行一次refresh()
- 如何监听图片加载完成?
一、原生的js监听图片,img.onload = function(){}
二、vue中监听@load=“方法”
- 调用scroll的refresh进行刷新,更新滚动的高度。
解决方案:
第一步、现在main.js中创建一个bus总线,也就是一个vue实例bus
第二步、在需要没加载一张图片获取一次的高度的代码上添加imgload代码
通过Bus总线发送itemImageload事件
第三部步、祖组件监听从孙组件的事件,没监听一次刷新一次scroll中的高度
解决方法【事件总线】
bus->总线
Vue.prototype.$bus = new Vue
this.bus.emit('事件名称',参数)
this.bus.on('事件名称',回调函数(参数))
效果: