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

Posted 2020-11-16 downrain

• 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);
            };
          }