每日 30 秒 ? 判斷是否為頁面底部

callmewhy 發布于2019-08-26 13:36 / 3524人閱讀

簡介

分頁、優化、可視區域、無限加載

寫前端頁面時最經常遇到的開發需求之一就是渲染后端數據返回的數據對象，當數據對象數量極多的時候便需要進行分頁。

常見的分頁方式有三種：

在頁面底部生成 上一頁、下一頁、頁面列表 按鈕。

用戶可以很直接的選擇自己需要瀏覽的頁面。

不需要擔心頁面數據過多造成的卡頓。

比起 自動加載更多數據 略顯不智能。

在頁面底部生成 加載更多數據 按鈕。

相對于頁面底部生成分頁相關按鈕體驗好一點

用戶可以控制自己是否需要加載更多數據。

比起 自動加載更多數據 略顯不智能。

需要注意頁面數據過多造成的卡頓。

當用戶滾動到頁面底部時 自動加載更多數據。

更符合用戶直覺體驗很好。

需要注意頁面數據過多造成的卡頓。

如果頁腳有其他數據用戶需要翻遍數據才能看到頁腳。

當然分頁沒有絕對的銀彈得根據不同的情況進行略微的調整和交叉搭配使用分頁方式。例如：頁面頁腳有需要用戶查看的數據時，可以使用 自動加載更多數據，當加載二到三頁時提示 加載更多數據 按鈕，使得特定用戶可以較為方便的看到頁腳內容更多的情景就不一一列舉了。

頁面數據過多造成的卡頓可以參考每日 30 秒之 chunk 中給出的情景案例，利用 數據分組顯示 來減少 DOM 節點進而優化頁面卡頓，這里不討論分頁及其相關的優化。

今天分享的代碼是分頁過程中會用到的一個函數 判斷是否到達了頁面底部：

// 該源碼來自于 https://30secondsofcode.org
const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

代碼分析

窗口可見區域的高度 和 窗口已經滾動的距離高度 得到當前頁面所處的位置：

document.documentElement.clientHeight + window.scrollY

再與 整個頁面的高度 作比較來判斷是否已經到達了頁面底部，如果 整個頁面的高度 不存在則使用 窗口可見區域的高度 做代替：

... >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)

小技巧：利用 || 技巧來初始化數據

使用場景

做一個無限加載數據項的分頁功能，當頁面到達底部時進行數據加載。

// 監聽頁面滾動
document.addEventListener("scroll", () => {
    // 如果到達頁面底部
    if(bottomVisible()) {
        // 1.發送網絡請求獲取數據
        // 2.插入數據到頁面
    }
});

相似代碼

判斷是否到達了頁面頂部

const topVisible = () => window.scrollY == 0

一起成長

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

GPU云服務器云服務器判斷是否為json js判斷是否為證書 js判斷是否為數字 asp判斷是否為空

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

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

每日 30 秒 ? HTML Cosplay

showImg(https://segmentfault.com/img/remote/1460000018891197); 簡介無障礙、WAI、ARIA、a11y、Accessibility、框架選擇如何向視障用戶介紹兔子長什么樣？有的同學可能會說：毛茸茸的長耳朵。短短圓圓的小尾巴。紅紅的眼睛。那如何向視障用戶介紹網頁長什么樣？有看過語義化與無障礙樹的同學可能會說： ...

RichardXG 2019-08-23 16:58 評論0 收藏0
每日 30 秒 ? 巧用可視區域

簡介可視區域、頁面優化、DOM節點多、圖片懶加載、性能可視區域是一個前端優化經常出現的名詞，不管是顯示器、手機、平板它們的可視區域范圍都是有限。在這個有限可視區域區域里做到完美顯示和響應，而在這個區域外少做一些操作來減少渲染的壓力、網絡請求壓力。在每日 30 秒之對海量數據進行切割中的使用場景，我們就是利用了有限可視區域只渲染一部分 DOM 節點來減少頁面卡頓。既然可視區域 ...

DevYK 2019-08-23 15:57 評論0 收藏0
每日 30 秒 ? 復制內容到剪貼板

showImg(https://segmentfault.com/img/remote/1460000018781682?w=900&h=500); 簡介剪貼板、復制、兼容復制內容到剪貼板是前端開發過程中會經常遇到的一個需求，大部分同學開發時往往會直接打開搜索框開始尋找別人寫好的組件庫，而聰明的同學會開始思考問題：產品的使用場景是什么？是否需要兼容很多瀏覽器？是否在項目中需要頻繁使用...

Pandaaa 2019-08-23 15:55 評論0 收藏0
每日 30 秒 ? 數組所有數據是否滿足某條件

showImg(https://segmentfault.com/img/remote/1460000018770987?w=900&h=500); 簡介數組、every、any 判斷一個數組中是否都滿足特定的條件，如果滿足則返回 true 否則返回 false。 // 該源碼來自于 https://30secondsofcode.org const all = (arr, fn = Boole...

FullStackDeveloper 2019-08-23 15:38 評論0 收藏0
每日 30 秒 ? 投懷送抱

showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 簡介 SEO、sitemap、搜索引擎優化、簡單教程在曖昧期和暗戀期時心里總是懸掛著： ta 為什么還不和我表白？ ta 是不是對我沒感覺？ ta 是不是只是把我當備胎？ ta 是不是對誰都這樣？解決問題最簡單的方式就是直接問問對方...

kevin 2019-08-23 16:50 評論0 收藏0