スクロール可能な領域の問題を解決するためにどのようにより良い-スクロール

より良い-スクロールは、多くの特性によって決定された領域をスクロールすることができます方法を決定する際scrollerHeight
- scrollerHeight特性はに従い高いコンテンツサブアセンブリより良いスクロール放電であります
- しかし、初めに私たちの家scrollerHeightプロパティを計算し、画像にカウントされません
- すべて、計算TELLが間違っている（1300 +）
- その後、画像の後に新たな高みに来てロードされますが、プロパティはscrollerHeight更新されていません
- だから、問題を転がします
この問題を解決する方法
- 各画像があれば画像があるようにロードされ、ロードされたか否かを監視し、実行リフレッシュを（）
- どのように画像を監視することがロードされていますか？
  - ネイティブJSモニター画像：img.onload（）=関数（）
  - Vueのリスナー：@load = 'メソッド'
- refresh（）メソッドを呼び出して、スクロール

非サンズアセンブリを通信する方法

それは非親子通信コンポーネントを含むので、そこでここでは、選択したイベントバスを

バス - >バス
Vue.probetype。$バス=新しいヴュー（）//インスタンス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>

一つの問題：問題の更新が見つかりません
- まず：Scroll.vue前に、this.scrollメソッドは、オブジェクトが値を持っているかどうかを決定する呼び出すthis.scroll
```
refresh() {
      this.scroll && this.scroll.refresh();
    }
```
- 第二：ライフサイクルでは、この機能を使用する代わりに作成されたの$ refs.scrollを使用してのマウント。
リフレッシュ非常に頻繁に問題のために、像ブレ補正処理
- デバウンス/スロットルスロットルを振ります
- 手ぶれ補正機能は、プロセスで動作します
  - 我々は、実行リフレッシュを指示した場合は、要求されたデータを実行するためにどのように多くの倍となる機能をリフレッシュ
  - Deboundceリフレッシュ機能は、新しい関数を作成し、関数に渡すことができます
  - 払込再び呼び出しの後に非常に多くの場合、我々は、新世代の機能を使用します
  - 次の実行は非常に高速である場合、関数の新世代は、と、非常に頻繁に呼び出すことはありません、そして時間がキャンセルされます
```
    // 防抖动函数
    debounce(func, delay) {
      let timer = null;

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

スクロール可能な領域の問題を解決するためにどのようにより良い-スクロール

おすすめ