如何解決 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);
            };
          }