vueで@scrollを使用してスクロールイベントをリスニングする

転載先:https://blog.csdn.net/qq449736038/article/details/80769507
vueでスクロールバーをスライドさせて下にロードします.
vueのscrollイベント
トップページをオンデマンドでロードするときにスクロールバーをスクロールしてからロードします
Windowsにバインドされている場合、ルーティング切り替え後もイベントがトリガーされるため、div要素にバインドされます.
(windowにバインドされている場合は、ナビゲーションガードでルーティングが離れたときにバインドを解除すればいいので、同じように機能を実現できます)

<template>
  <div class="body-container" @scroll="scrollEvent">
    <ul>
	<li></li>
	……
	<li></li>
    </ul>
  </div>
<template>
export default {
    name: 'demo',
    data () {
      return {
        msg: '',
      }
    },
    methods: {
      scrollEvent(e){
        console.log(e)
      },
    }
}

上記のように、私のliラベルが十分に多くても、ページがいっぱいで、ページがスクロールしている間にscrollEventをトリガーできないことに気づきました.何が原因ですか.
よく考えてみると、スクロールイベントは私のdivでトリガーされたわけではないと思います.スクロールバーは私のdivに現れていないからです.このdivは完全にliラベルに支えられており、スクロールイベントを生み出すのはdocumentです.
そこで小さな実験を行い、固定高さのdivを定義しました.

<div style="height: 300px" @scroll="scrollEvent">
    <div style="height: 200px"></div>
    <div style="height: 200px"></div>
    <div style="height: 200px"></div>
</div>

この300 px固定高さのdivでスクロールすると、やはりscrollEventがトリガーされ、問題の原因が見つかり、次は解決しました.
一定の高さを持つことができれば、スクロールイベントをトリガーすることができます.
しかし、固定高さはどのように与えるのか、メーカーごとに携帯電話の画面の高さが異なり、一部の携帯電話の表示が不完全になったり、底に空白を残したりすることはできないでしょう.
もちろん方法がある!html、body、.私のですbody-containerはdocumentの高さに継承できます.

html,body{
  height:100%
}
.home-test{
  height: 100%
  overflow-y: scroll //       ？
}

もう一つの方法があります.body-container fixedを使用した位置決め

.body-container{
    position: fixed;
    top:6rem;
    left: 0;
    right:0;
    bottom: 0;
    overflow: auto
}

上下左右の位置が固定されているのでdivも自然に固定高さがあり、この方法はページに固定高さのヘッドナビゲーションがあり、私のプロジェクトには6 remの高さのヘッドナビゲーションがあるのでfixed位置決めを採用しました.
次に、底に滑ったかどうかを確認します.

export default {
    name: 'demo',
    data () {
      return {
        msg: '',
      }
    },
    methods: {
      scrollEvent(e){
        //     +     >       -100  
        if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100){ 
          this.loadMore();    //    
        }
      },
    }
}

これにより、底まで転がっているかどうかをより明確に判断できます.しかし、このように書くだけでは、底部100 px内をスクロールすると、複数回のロードがトリガーされるため、判断条件を追加する必要がある

methods: {
      scrollEvent(e){
      console.log(e)  // e       ，      
        // !this.moreLoading        ，       ， this.moreLoading  true
        // !this.noMore         false，            1     ，         ，  this.noMore  true，                
        if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.moreLoading && !this.noMore){
          this.loadMore();
        }
      },
    }

これで、機能は完璧に実現し、documentは使用されなかった.addEventListenerはvueの完全性を破壊する