Better-Scroll可滚动区域问题

解决Better-Scroll可滚动区域的问题

Better-Scroll在决定有多少区域可以滚动时,是根据scrollerHeight属性决定

  1. scrollerHeight属性石根据放Better-Scroll的content中的子组件的高度
  2. 但是页面刚开始加载,计算scrollerHeight属性的时候,由于图片加载较慢,就会将图片的高度不计算在内,所以计算出来的是错误高度
  3. 后来图片加载进来之后就有了新的高度,但是scrollerHeight属性并没有进行更新,所以滚动会出现问题,
    如何决绝Better-Scroll出现的可滚动区域问题?
  4. 监听每一张图片是否加载完成,只要有一张图片加载完成了就执行一次refresh()
  5. 如何监听图片加载完成?

一、原生的js监听图片,img.onload = function(){}
二、vue中监听@load=“方法”

  1. 调用scroll的refresh进行刷新,更新滚动的高度。

解决方案:
第一步、现在main.js中创建一个bus总线,也就是一个vue实例bus
Better-Scroll可滚动区域问题_第1张图片
第二步、在需要没加载一张图片获取一次的高度的代码上添加imgload代码
Better-Scroll可滚动区域问题_第2张图片
通过Bus总线发送itemImageload事件
Better-Scroll可滚动区域问题_第3张图片

第三部步、祖组件监听从孙组件的事件,没监听一次刷新一次scroll中的高度
Better-Scroll可滚动区域问题_第4张图片
解决方法【事件总线】

	bus->总线
	Vue.prototype.$bus = new Vue
	this.bus.emit('事件名称',参数)
	this.bus.on('事件名称',回调函数(参数))

效果:Better-Scroll可滚动区域问题_第5张图片

你可能感兴趣的:(Vue,vue.js,javascript,前端,html,css)