欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)上拉加載下一頁效果的示例代碼

 更新時間:2022年08月31日 11:40:35   作者:camellia  
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)上拉加載下一頁效果,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)Vue有一定幫助,需要的可以參考一下

之前從來沒有單獨的做過手機端的網(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)聽瀏覽器窗口變化問題

    這篇文章主要介紹了解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 封裝一下vue中的axios示例代碼詳解

    封裝一下vue中的axios示例代碼詳解

    這篇文章主要介紹了封裝一下vue中的axios,本文通過示例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • 詳解Vue3頁面如何自適應(yīng)表格滾動高度

    詳解Vue3頁面如何自適應(yīng)表格滾動高度

    這篇文章主要為大家詳細(xì)介紹了Vue3頁面如何自適應(yīng)表格滾動高度,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-02-02
  • 淺談vue?腳手架文件結(jié)構(gòu)及加載過程

    淺談vue?腳手架文件結(jié)構(gòu)及加載過程

    這篇文章主要介紹了vue腳手架文件結(jié)構(gòu)及加載過程淺談,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08
  • vue如何在新窗口打開頁面

    vue如何在新窗口打開頁面

    這篇文章主要介紹了vue如何在新窗口打開頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue-cli3+ts+webpack實現(xiàn)多入口多出口功能

    vue-cli3+ts+webpack實現(xiàn)多入口多出口功能

    這篇文章主要介紹了vue-cli3+ts+webpack實現(xiàn)多入口多出口功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • vue.js使用Element-ui實現(xiàn)導(dǎo)航菜單

    vue.js使用Element-ui實現(xiàn)導(dǎo)航菜單

    這篇文章主要為大家詳細(xì)介紹了vue.js使用Element-ui中實現(xiàn)導(dǎo)航菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue回到頂部監(jiān)聽滾動事件詳解

    vue回到頂部監(jiān)聽滾動事件詳解

    這篇文章主要為大家詳細(xì)介紹了vue回到頂部監(jiān)聽滾動事件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • 詳解Vue-cli3.X使用px2rem遇到的問題

    詳解Vue-cli3.X使用px2rem遇到的問題

    這篇文章主要介紹了詳解Vue-cli3.X使用px2rem遇到的問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案

    vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案

    這篇文章主要介紹了vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案 ,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07

最新評論