スクロール イベントは、ページが一番下までスクロールされたかどうかをどのように監視しますか

一番下までスクロールすると、ほとんどのアプリがさらに読み込まれるかどうかなどを聞きます。早速、料理を直接サーブしましょう。

要素がレンダリングされた後に vue レンダリング ルールでスクロール モニタリングを実行する必要があることを考慮すると、対応する dom ノードを取得できないため、
$nextTick() と組み合わせて使用​​する必要があります。

cont はリスニング領域、'scroll' は add イベント、this.scroll はメソッド、div は ref="cont" にバインドされています。

mounted() {
    this.$nextTick(()=>{
        this.$refs.cont.addEventListener('scroll',this.scroll)
    })
}

スクロールは、最下部に達したかどうかを判断し、最下部に達した場合は、データまたはその他の操作を要求できます。

scroll(e) {
            let scrollTop = e.target.scrollTop; //滑入屏幕滚动条滚动时，距离顶部的距离
            let windowHeitht = e.target.clientHeight; //能看到的页面的高度
            let scrollHeight = e.target.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
            let total = scrollTop + windowHeitht
            if(total == scrollHeight){
                console.log("到底了")
                //加载操作
            }else {
                console.log("还没有到底")
            } 
        }

ロードするデータがない場合は、パフォーマンスの浪費を避けるためにスクロール イベントを削除できます。

this.$refs.cont.removeEventListener('scroll',this.scroll)

注:必ずスクロール領域に高さを追加し、余分な部分がスクロールしていることを確認してください。そうしないと、イベントがトリガーされません。スクロール領域クラス = "cont".

.cont {
    overflow: scroll;
    width: 100%;
    height: 677px;
}

これがイベントモニターを下までスクロールするかどうかの全内容で、難しいことではありません。

説明に誤りがあれば訂正してください！