您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue如何實(shí)現(xiàn)上拉加載下一頁效果”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Vue如何實(shí)現(xiàn)上拉加載下一頁效果”吧!
監(jiān)聽滾動條所在位置的方法如下:
/** * @name: 監(jiān)聽 滾動條變化 * @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); // 設(shè)備/屏幕高度 scrollObj = document.querySelector('.top-div'); // 滾動區(qū)域 // 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();// 獲取下一頁數(shù)據(jù) }//*/ }
測試一下,效果如下圖所示:
看了上邊console出來滾動條的值之后,效果體驗(yàn)及其不佳,不行啊,這玩意用不了啊。后來,我就琢磨,不能夠啊,怎么能不好用呢。問了下公司的前端,我倆研究了半天,也沒有找到太好的解決辦法。
這個時(shí)候,我靈機(jī)一動,上拉加載不好用,那就退而求其次,改成點(diǎn)擊加載下一頁唄。
這個就不存在難度了,一個點(diǎn)擊事件請求接口就好了,最后注意一下,返回值是疊加到數(shù)組里邊的。不要覆蓋。最終效果如下圖所示:
做完了之后,總覺得還是上拉加載分頁這個功能比較好,這個項(xiàng)目我是用了組件庫(vant)
我看了一下vant的使用文檔后發(fā)現(xiàn),vant有上拉加載這個組件,我真是……
組件詳情如下圖所示:
感謝各位的閱讀,以上就是“Vue如何實(shí)現(xiàn)上拉加載下一頁效果”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Vue如何實(shí)現(xiàn)上拉加載下一頁效果這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。