vueスクロールバーのロードデータのリスニング

vueプロジェクトでスクロールバーを傍受するのと、通常のHTMLでスクロールバーを傍受するのとは同じです.まず3つの値を知る必要があります:スクロールバーの距離divの頂部の値、divの自分の高さとdivの内容を広げる高さ、それぞれ私の下の変数に対応してscrollTop、height、htmlHeightです;2.次に通常のHTMLと異なる点は、スクロールホイールがコンテンツの増加に伴ってページの下部に維持され、イベントが実行され続けることである.この問題は、vue DOMレンダリングが特別であり、データが変化した後にDOMがすぐに変化するのではなく、仮想DOMを生成し、一定のポリシーに基づいてページをレンダリングするためである.この場合、遅延settimeout関数にwatchを加えてtableDataのデータを監視するかもしれませんが、スクロールバーはロールバックするたびにジャンプし、2回ロールバックします.この場合は$nextTickが必要であり、$nextTickは次回のDOM更新サイクルが終了した後に遅延コールバックを実行し、データを修正した後に使用する.コードは次のとおりです.

mounted(){
             //   scroll       
             let self = this;
              $(".div-table").scroll(function(){
                self.loadMore();
            })
        },
        methods:{
            loadMore() {
                let scrollTop = document.getElementsByClassName("div-table")[0].scrollTop;
                let height = $(".div-table").height();
                let htmlHeight = $(".table-loading").height()
                //console.log(scrollTop + ',' + height + "," + scrollHeight)
                if(scrollTop + height >= htmlHeight){
                    let start = this.tableData.length;
                    if(start >= 43){ //    43 ，  43    “       ”。
                        this.hasData = false;
                        return;
                    }
                 //                 
                    var arr = [] 
                    for(let i = start + 1; i < start + 10; i++) {
                            arr.push({
                                name: '   ',
                                gender:' ',
                                age:"17",
                                doctor:"  ",
                                department:"  ",
                                date: '2016-05-02',
                                money:"2000.45",
                                operation:"  "
                            })
                        }
                setTimeout(()=>{
                        this.tableData = this.tableData.concat(arr);
    //let height = $(".div-table").scrollTop();
    //var div = document.getElementsByClassName('div-table')[0];
    //div.scrollTop = height
                },1000)
               }  

            }
        },
        watch:{ 
            tableData:function(){
                let height = $(".div-table").scrollTop();
                this.$nextTick(() => {
                    var div = document.getElementsByClassName('div-table')[0];
                    div.scrollTop = height
                })
            }
        }

あなたに役に立つことを望みます!