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

Better-Scroll 在决定由多少区域可以滚动时，是根据 scrollerHeight 属性决定
- scrollerHeight 属性是根据放 Better-Scroll 的 content 中的子组件的高度
- 但是我们的首页中，刚开始在计算 scrollerHeight 属性时，是没有将图片计算在内的
- 所有，计算出来的告诉是错误的（1300+）
- 后来图片加载进来之后有了新的高度，但是 scrollerHeight 属性并没有进行更新
- 所以滚动出现了问题
如何解决这个问题
- 监听每一张图片是否加载完成，只要有一张图片加载完成了，执行一次 refresh()
- 如何监听图片加载完成了？
  - 原生的 js 监听图片： img.onload() = function()
  - Vue 中的监听： @load = '方法'
- 调用 scroll 的 refresh() 方法

如何进行非父子组件的通信

因为涉及到非父子组件的通信，所以这里我们选择了 事件总线

bus -> 总线

Vue.probetype.$bus = new Vue() // 创建 vue实例

// 在 main.js 中
Vue.probetype.$bus = new Vue(）

this.bus.emit('事件名称'，参数1)

      // 在 传出的 组件中 
      <template>
          <div>
              <img src= ""   @load = 'imageLoad' />
          </div>
      <template>

      <script>
          export default {
              methods: {
                  imageLoad() {
                      // 添加方法
                      this.$bus.$emit('ItemImageLoad')
                  }
              }
          }
      </script>

this.bus.on('事件名称'，回调函数（参数）)

// 在 传入的 组件中

<script>
  export default {
        、、、 //在 mounted 中使用
        mounted() {
            this.$bus.$on('ItemImageLoad',() => {
                this.$refs.scroll.scroll.refresh()
            })
        }
        、、、
    }
</script>

问题一： refresh 找不到的问题
- 第一：在 Scroll.vue 中，调用 this.scroll 的方法之前，判断 this.scroll 对象是否有值
```
refresh() {
      this.scroll && this.scroll.refresh();
    }
```
- 第二：在 mounted 生命周期函数中使用 this.$refs.scroll 而不是在 created中使用
对于 refresh 非常频繁的问题，进行防抖操作
- 防抖debounce / 节流 throttle
- 防抖函数起作用的过程
  - 如果我们直接执行 refresh ，那么 refresh 函数会被执行请求数据多少的次数
  - 可以 refresh 函数传入到 deboundce 函数中，生成一个新的函数
  - 之后再调用非常频繁的实收，就使用新生成的函数
  - 而新生成的函数，并不会非常频繁的调用，如果下一次执行来的非常快，那么会将上一次取消掉
```
    // 防抖动函数
    debounce(func, delay) {
      let timer = null;

      return function(...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this,args);
        }, delay);
      };
    }
```

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

猜你喜欢