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

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

/***@name:監聽滾動條變化*@author:camellia*@date:2021-10-10*/consthandleScroll=(env:any)=>{//=========================================================================//回到頂部letscrollTop=document.getElementsByClassName('top-p')[0].scrollTop;if(scrollTop>100){data.flag_scroll=true}else{data.flag_scroll=false}//===============================================//上拉加載下一頁代碼letclientHeight=document.getElementsByClassName('top-p')[0].clientHeight;letscrollObj=<Element|null>(null);//設備/屏幕高度scrollObj=document.querySelector('.top-p');//滾動區域//varscrollTop_page=document.documentElement.scrollTop||document.body.scrollTop;letscrollHeight=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;//p到頭部的距離+屏幕高度=可滾動的總高度//滾動條到底部的條件getData();//獲取下一頁數據}//*/}

測試一下,效果如下圖所示:

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

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

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

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

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

組件詳情如下圖所示:

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