国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js如何實現上拉加載更多...

yagami / 435人閱讀

摘要：我們在項目中經常使用到下拉加載更多，之前要么是底部寫加載按鈕，要么是引入插件。

我們在項目中經常使用到下拉加載更多，之前要么是底部寫加載按鈕，要么是引入插件。今天終于有時間手寫一個了，之前感覺挺麻煩，明白原理后，其實很簡單...


此圖片來自于網絡

scrollTop：滾動視窗的高度距離window頂部的距離，它會隨著往上滾動而不斷增加，初始值是0，它是一個變化的值；
clientHeight:它是一個定值，表示屏幕可是區域的高度；
scrollHeight：頁面不能滾動時是不存在的，body長度超過window時才會出現，所表示body所有元素的長度，

由上面的三個值所產生一個原理公式：

scrollTop + clientHeight >= scrollHeight

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108749.html

相關文章

  • webpack+vue+mint-ui 實現上拉加載更多（Loadmore組件）

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

    LiuZh 評論0 收藏0

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

    摘要：支持復雜頁面，例如添加自定義頭部和底部布局，支持橫向滑動，還可以支持粘貼頭部類似微信好友分組，支持不規則瀑布流效果，支持側滑刪除功能。支持粘貼頭部的需求效果，這種效果類似微信好友分組的那種功能界面。 目錄介紹 1.復雜頁面庫介紹 2.本庫優勢亮點 2.1 支持多種狀態切換管理 2.2 支持添加多個header和footer 2.3 支持側滑功能和拖拽移動 2.4 其他亮點介紹 ...

    silenceboy 評論0 收藏0

  • 復雜type頁面封裝庫，支持多種狀態切換和下拉刷新上拉加載

    摘要：支持復雜頁面，例如添加自定義頭部和底部布局，支持橫向滑動，還可以支持粘貼頭部類似微信好友分組，支持不規則瀑布流效果，支持側滑刪除功能。十分方便實現復雜的布局頁面，結構上層次分明，便于維護。 目錄介紹 1.復雜頁面庫介紹 2.本庫優勢亮點 2.1 支持多種狀態切換管理 2.2 支持添加多個header和footer 2.3 支持側滑功能和拖拽移動 2.4 其他亮點介紹 3.如...

    Karrdy 評論0 收藏0

  • 實現移動端上拉加載和下拉刷新的vue插件(mescroll.js)

    摘要：做一個簡單的移動端展示項目，后臺分頁后前端加載，實現上拉加載下一頁，找了下，還是用這個插件好一點安裝不要使用安裝導入在哪個頁面使用則在哪個頁面導入這里的話，我使用全局導入會出現問題若有錯還請大家指出暫時想到的就是局部引入注冊組件注冊組件 做一個簡單的移動端展示項目，后臺分頁后前端加載，實現上拉加載下一頁，找了下，還是用這個mescroll.js插件好一點 1.npm安裝 npm ins...

    hightopo 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<