オリジナルjsリスニングページスクロールイベント

私たちはプロジェクトをするときにリストに遭遇することは避けられません.リストにはページングの要求があります.
モバイル側のリストのロードでは、uiフレームワークを使用する場合はもちろん別です.
今回vueモバイル側のプロジェクトをするとき、リストにデータをロードするシーンがあります.mountedでwindowにスクロールリスニングを加えたに違いありません.
ここでthisを事前に定義することを覚えておいてください.もしあなたがthisに役に立つなら、傍受も非同期操作なので、事前に定義していないと間違って報告されます.

mounted () {
    this.initList()
    var that = this
    window.addEventListener("scroll", function () {
        if(document.body.scrollHeight <= window.screen.height + document.body.scrollTop){
            if (that.noMore) {
                return
            }
            if (that.initOver) {
                that.initList()
            }
        }
    })
},

ページが最後までスクロールされると、プログラムはif判定に進んでデータ要求を実行する.
ここで私はプロジェクトをする過程で何度もスクロールリスニングを使っていますが、面白いことに成功したところもあれば失敗したところもあります.
ブラウザによってページのスクロール距離を取得する方法が異なるためです.
以下の3つをまとめました

(window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)

それぞれどのブラウザに対応しているのか分かりませんが、上のコードのようにそのまま書けばOKで、関数は値のあるものを探して計算します.
まだ
リストページから1ページ書きにジャンプすると、前のリストページのページスクロールリスニングイベントはまだ存在し、次のページを最後まで引っ張ると前のページのスクロールリスニングを引き続きリスニングします.
では、ページを離れた後も存在する以上、私たちは離れたときにこの傍受事件を削除すればいいのです.
beforeDestroyでremoveEventListenerという方法で取り除く

beforeDestroy(){
  var that = this
  window.removeEventListener('scroll', that.scroll);//        
},

ここでは、最後までスクロールするトリガの方法をカプセル化します.methodで

methods: {
    scroll: function () {
        var that = this
        if (document.body.scrollHeight <= window.screen.height + document.body.scrollTop) {
            if (that.noMore) {
                return
            }
            if (that.initOver) {
                that.init(2)
            }
        }
    },
}

ではmountedのスクロールリスニングは

mounted: function () {
  this.init(0)
  var that = this
  window.addEventListener("scroll", that.scroll)
},

removeEventListenerの後に付いているのは、関数名に括弧を付けてはいけないはずですが(私もなぜか分かりませんが)、直接関数を書くのはいいです.