BScroll 滚动区域的 bug 分析和解决

bug 复现

bug 分析

1.Better-Scroll 在决定有多少区域滚动时，根据 scrollerHeight 属性决定

• scrollerHeight 属性是根据放 Better-Scroll 的 content 中的子组件的高度决定的。
• 但是我们的首页中, 刚开始在计算 scrollerHeight 属性时, 是没有将图片计算在内的
• 所以, 计算出来的告诉是错误的(1290+)；后来图片加载进来之后有了新的高度,
• 但是 scrollerHeight 属性并没有进行更新，所以滚动出现了问题

2.如何解决这个问题?

• 方案：监听每一张图片是否加载完成，只要有一张图片加载完成了，就执行一次 scroll 的 refresh()
• 问题：那么如何监听图片加载完成了?
  • 原生的 js 监听图片: img.onload = function() {}
  • Vue 中监听: @load='imageLoad'

3.如何将 GoodsListItem.vue 中的事件传入到 Home.vue中

方案一：逐层传递

可以通过 Home.vue 拿，this.$refs.scroll.scroll.refresh 此时，可在 GoodsListItem 中，将事件发送给 GoodsList，然后 GoodsList 将事件发给 Home.vue ，一级一级地往上报

方案二：vuex

搞一个 vuex 对象，让 vuex 做一个中间的通信

方案三：使用事件总线

这个地方我们采用方案三

步骤一：发送一个 itemImageLoad 事件

步骤二：Home.vue 中监听事件

步骤三：vue 实例做数据总线

注意：Scroll.vue 的一个方法

其他 bug

1.refresh undefined