supermall项目上拉加载bug分析

1.bug分析

bug出现的过程是这样的：better-scroll框架会计算滚动内容的高度(通过BScroll对象的scrollerHeight属性记录滚动内容的高度) 由于内容中的图片资源还未加载成功 就已经完成计算 导致计算结果错误 而计算之后 图片资源随之加载完成 这时候better-scroll框架又不会再次更新 因此最终的滚动内容高度只能是不准确的 从而导致我们再滑动过程中不能够滚动到当前页码的末尾

2.问题解决

如果想要正确得到最终的滚动内容高度 我们就需要再每一次图片加载完毕之后进行一次better-scroll刷新 即BScroll.refresh() 刷新操作可以用于更新滚动内容的计算值
但是图片加载的时机如何监听 如果通过原生js的话 利用的是image.onload = function(){} 而如果是通过vue监听图片加载的时机的话 是利用@load完成的

问题是 GoodsItem属于Goods的子组件 而Goods和Scroll属于Home的子组件 在Home组件中 可以通过父访问子(即ref)的方式获取Scroll组件中的BScroll对象 从而调用他的refresh方法 但该方法的调用必须要在每一张图片加载完毕之时才进行 暴力的做法是通过子传父的方式一层层将GoodsItem中的自定义方法往上传递 直到传递给Home为止 如果层级较深的话 那么这种方式显然不合适 因此的话 我们需要通过设计一个中间层来作为Home组件和GoodsItem组件通信的桥梁

这个桥梁的选择采用事件总线最为合适 因为他是专门用于共享事件 你可以将GoodsItem中图片加载函数中的自定义事件发送给事件总线 由Home组件监听事件总线中由GoodsItem发送而来的事件 从而决定是否刷新better-scroll记录的滚动内容高度

3.事件总线

由于我们需要通过事件总线完成对事件的发送和监听操作 因此的话 我们可以通过$bus处理这些相关操作 但是默认$bus为空 我们需要做到该关键字在所有组件中共享 利用Vue的原型就可以实现共享 并且$bus赋值为Vue实例