为什么滚动出现卡顿

• better-scroll在决定有多少区域可以滚动时，是根据scrollerHeight属性决定。scrollerHeight属性是根据放better-scroll的content中的子组件的高度决定的
• 在加载组件中从服务端请求的图片时，scrollerHeight属性是没有将图片计算在内的，这就会导致当图片加载后有了新的高度，但scrollerHeight属性没有更新，所以滚动出现问题。

解决方案

思路

监听每一张图片是否加载完成，每张图片加载完成都执行一次refresh()

实施

第一步：监听图片加载

• 原生JS：img.onload=function()
• Vue：$load=方法<img :src="https://juejin.cn/post/goodsItem.show.img" @load="imageLoad" />

第二步：使用事件总线EventBus
创建vue实例
Vue.prototype.$bus = new Vue();
发送和接收事件
发送通过

methods: {
  imageLoad() {
    this.$bus.$emit("itemImageLoad");
  }
}
复制代码

接收事件通过

 this.$bus.$on("itemImageLoad", () => {
   this.$refs.scroll.refresh();
 });
复制代码

接收到后执行refresh()更新界面，使scollerHeight属性重新计算滚动高度。

防抖

前面虽然解决了滚动卡顿，但是多次调用refresh也并不是一个好的选择，所以添加防抖后，新生成的函数可以成功解决refresh的频繁调用。

• debounce的封装

debounce(func, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
},
复制代码

• 调用防抖后的函数

mounted() {
  const refresh = this.debounce(this.$refs.scroll.refresh, 200);
  this.$bus.$on("itemImageLoad", () => {
    refresh();
  });
},
复制代码