Vue實現(xiàn)上拉加載下一頁效果的示例代碼
之前從來沒有單獨的做過手機端的網(wǎng)頁。當(dāng)然,之前我也沒有獨立的從切圖到寫代碼交互做過前端的頁面。
這里邊的分頁還是和響應(yīng)電腦端的數(shù)字分頁。但是,其實獨立做一個手機端的網(wǎng)站,而不是響應(yīng)式的網(wǎng)站的時候,這種數(shù)字分頁看起來可能是不太好。
手機端網(wǎng)站嘛,還是仿照著APP或者是微信小程序那種上拉觸底分頁比較好。但是,這個玩意怎么實現(xiàn)呢?
第一種想法,監(jiān)聽滾動條,滾動條滾動到頁面底部,觸發(fā)方法,請求接口加載下一頁的數(shù)據(jù)。嗯,應(yīng)該是可行的,我們來嘗試一下:
監(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出來滾動條的值之后,效果體驗及其不佳,不行啊,這玩意用不了啊。后來,我就琢磨,不能夠啊,怎么能不好用呢。問了下公司的前端,我倆研究了半天,也沒有找到太好的解決辦法。
這個時候,我靈機一動,上拉加載不好用,那就退而求其次,改成點擊加載下一頁唄。
這個就不存在難度了,一個點擊事件請求接口就好了,最后注意一下,返回值是疊加到數(shù)組里邊的。不要覆蓋。最終效果如下圖所示:
做完了之后,總覺得還是上拉加載分頁這個功能比較好,這個項目我是用了組件庫(vant)
我看了一下vant的使用文檔后發(fā)現(xiàn),vant有上拉加載這個組件,我真是……
組件詳情如下圖所示:
組件要是能滿足需求,還是用組件吧……
到此這篇關(guān)于Vue實現(xiàn)上拉加載下一頁效果的示例代碼的文章就介紹到這了,更多相關(guān)Vue上拉加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題
這篇文章主要介紹了解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue-cli3+ts+webpack實現(xiàn)多入口多出口功能
這篇文章主要介紹了vue-cli3+ts+webpack實現(xiàn)多入口多出口功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05vue.js使用Element-ui實現(xiàn)導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了vue.js使用Element-ui中實現(xiàn)導(dǎo)航菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案
這篇文章主要介紹了vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案 ,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07