亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

js如何實(shí)現(xiàn)上拉加載更多...

yagami / 508人閱讀

摘要：我們?cè)陧?xiàng)目中經(jīng)常使用到下拉加載更多，之前要么是底部寫(xiě)加載按鈕，要么是引入插件。

我們?cè)陧?xiàng)目中經(jīng)常使用到下拉加載更多，之前要么是底部寫(xiě)加載按鈕，要么是引入插件。今天終于有時(shí)間手寫(xiě)一個(gè)了，之前感覺(jué)挺麻煩，明白原理后，其實(shí)很簡(jiǎn)單...


此圖片來(lái)自于網(wǎng)絡(luò)

scrollTop：滾動(dòng)視窗的高度距離window頂部的距離，它會(huì)隨著往上滾動(dòng)而不斷增加，初始值是0，它是一個(gè)變化的值；
clientHeight:它是一個(gè)定值，表示屏幕可是區(qū)域的高度；
scrollHeight：頁(yè)面不能滾動(dòng)時(shí)是不存在的，body長(zhǎng)度超過(guò)window時(shí)才會(huì)出現(xiàn)，所表示body所有元素的長(zhǎng)度，

由上面的三個(gè)值所產(chǎn)生一個(gè)原理公式：

scrollTop + clientHeight >= scrollHeight

    let clientHeight  = document.documentElement.clientHeight; //瀏覽器高度
    let scrollHeight = document.body.scrollHeight;
    let scrollTop = document.documentElement.scrollTop;
 
    let distance = 50;  //距離視窗還用50的時(shí)候，開(kāi)始觸發(fā)；

    if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
        console.log("到底了，開(kāi)始加載數(shù)據(jù)");
    }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108749.html

相關(guān)文章

  • webpack+vue+mint-ui 實(shí)現(xiàn)上拉加載更多（Loadmore組件）

    摘要：因?yàn)闃I(yè)務(wù)的需要界面需要實(shí)現(xiàn)分頁(yè)的功能，所以我就研究了一下如何利用自帶的組件實(shí)現(xiàn)上拉加載更多功能。代碼如下上拉加載更多初始化方法如下下面便是上拉加載更多的方法這樣就大功告成啦 因?yàn)闃I(yè)務(wù)的需要界面需要實(shí)現(xiàn)分頁(yè)的功能，所以我就研究了一下如何利用mint-ui自帶的loadmore組件實(shí)現(xiàn)上拉加載更多功能。 首先在文件中引入組件 import {Indicator, Loadmore} f...

    LiuZh 評(píng)論0 收藏0

  • RecyclerView封裝庫(kù)和綜合案例【包含25篇博客】

    摘要：支持復(fù)雜頁(yè)面，例如添加自定義頭部和底部布局，支持橫向滑動(dòng)，還可以支持粘貼頭部類似微信好友分組，支持不規(guī)則瀑布流效果，支持側(cè)滑刪除功能。支持粘貼頭部的需求效果，這種效果類似微信好友分組的那種功能界面。 目錄介紹 1.復(fù)雜頁(yè)面庫(kù)介紹 2.本庫(kù)優(yōu)勢(shì)亮點(diǎn) 2.1 支持多種狀態(tài)切換管理 2.2 支持添加多個(gè)header和footer 2.3 支持側(cè)滑功能和拖拽移動(dòng) 2.4 其他亮點(diǎn)介紹 ...

    silenceboy 評(píng)論0 收藏0

  • 復(fù)雜type頁(yè)面封裝庫(kù)，支持多種狀態(tài)切換和下拉刷新上拉加載

    摘要：支持復(fù)雜頁(yè)面，例如添加自定義頭部和底部布局，支持橫向滑動(dòng)，還可以支持粘貼頭部類似微信好友分組，支持不規(guī)則瀑布流效果，支持側(cè)滑刪除功能。十分方便實(shí)現(xiàn)復(fù)雜的布局頁(yè)面，結(jié)構(gòu)上層次分明，便于維護(hù)。 目錄介紹 1.復(fù)雜頁(yè)面庫(kù)介紹 2.本庫(kù)優(yōu)勢(shì)亮點(diǎn) 2.1 支持多種狀態(tài)切換管理 2.2 支持添加多個(gè)header和footer 2.3 支持側(cè)滑功能和拖拽移動(dòng) 2.4 其他亮點(diǎn)介紹 3.如...

    Karrdy 評(píng)論0 收藏0

  • 實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新的vue插件(mescroll.js)

    摘要：做一個(gè)簡(jiǎn)單的移動(dòng)端展示項(xiàng)目，后臺(tái)分頁(yè)后前端加載，實(shí)現(xiàn)上拉加載下一頁(yè)，找了下，還是用這個(gè)插件好一點(diǎn)安裝不要使用安裝導(dǎo)入在哪個(gè)頁(yè)面使用則在哪個(gè)頁(yè)面導(dǎo)入這里的話，我使用全局導(dǎo)入會(huì)出現(xiàn)問(wèn)題若有錯(cuò)還請(qǐng)大家指出暫時(shí)想到的就是局部引入注冊(cè)組件注冊(cè)組件 做一個(gè)簡(jiǎn)單的移動(dòng)端展示項(xiàng)目，后臺(tái)分頁(yè)后前端加載，實(shí)現(xiàn)上拉加載下一頁(yè)，找了下，還是用這個(gè)mescroll.js插件好一點(diǎn) 1.npm安裝 npm ins...

    hightopo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<