Vue如何實現上拉加載下一頁效果

這篇文章主要講解了“Vue如何實現上拉加載下一頁效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue如何實現上拉加載下一頁效果”吧！

監聽滾動條所在位置的方法如下：

       /**
         * @name: 監聽 滾動條變化
         * @author: camellia
         * @date: 2021-10-10
         */
        const handleScroll = (env:any) => {
            // =========================================================================
            // 回到頂部
            let scrollTop = document.getElementsByClassName('top-div')[0].scrollTop;
            if(scrollTop > 100)
            {
                data.flag_scroll = true
            }
            else
            {
                data.flag_scroll = false
            }
            // ===============================================
            // 上拉加載下一頁代碼
            let clientHeight = document.getElementsByClassName('top-div')[0].clientHeight;
            let scrollObj = <Element | null>(null);
            // 設備/屏幕高度
            scrollObj = document.querySelector('.top-div'); // 滾動區域
            // var scrollTop_page = document.documentElement.scrollTop || document.body.scrollTop;
            let scrollHeight = data.scrollHeight;
            if (scrollObj != null)
            {
                scrollHeight = scrollObj.scrollHeight // 滾動條的總高度
                data.scrollHeight = scrollHeight;
            }
            console.log("scrollObj：" + scrollObj);
            console.log("scrollHeight：" + scrollHeight);
            console.log("scrollTop:"+scrollTop );
            console.log("clientHeight:"+ clientHeight);
            console.log("total:"+ (scrollTop + clientHeight));
            if ( scrollTop + clientHeight === scrollHeight)
            {
                data.scrollTop = scrollTop;
                // div 到頭部的距離 + 屏幕高度 = 可滾動的總高度
                // 滾動條到底部的條件
                getData();// 獲取下一頁數據
            }//*/
        }

測試一下，效果如下圖所示：

看了上邊console出來滾動條的值之后，效果體驗及其不佳，不行啊，這玩意用不了啊。后來，我就琢磨，不能夠啊，怎么能不好用呢。問了下公司的前端，我倆研究了半天，也沒有找到太好的解決辦法。

這個時候，我靈機一動，上拉加載不好用，那就退而求其次，改成點擊加載下一頁唄。

這個就不存在難度了，一個點擊事件請求接口就好了，最后注意一下，返回值是疊加到數組里邊的。不要覆蓋。最終效果如下圖所示：

做完了之后，總覺得還是上拉加載分頁這個功能比較好，這個項目我是用了組件庫（vant）

我看了一下vant的使用文檔后發現，vant有上拉加載這個組件，我真是……

組件詳情如下圖所示：

感謝各位的閱讀，以上就是“Vue如何實現上拉加載下一頁效果”的內容了，經過本文的學習后，相信大家對Vue如何實現上拉加載下一頁效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！