成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

callmewhy / 3532人閱讀

簡介 
分頁、優(yōu)化、可視區(qū)域、無限加載

寫前端頁面時(shí)最經(jīng)常遇到的開發(fā)需求之一就是 渲染后端數(shù)據(jù)返回的數(shù)據(jù)對象，當(dāng)數(shù)據(jù)對象數(shù)量極多的時(shí)候便需要進(jìn)行分頁。

常見的分頁方式有三種：

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

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

不需要擔(dān)心頁面數(shù)據(jù)過多造成的卡頓。

比起 自動(dòng)加載更多數(shù)據(jù) 略顯不智能。

在頁面底部生成 加載更多數(shù)據(jù) 按鈕。

相對于頁面底部生成分頁相關(guān)按鈕體驗(yàn)好一點(diǎn)

用戶可以控制自己是否需要加載更多數(shù)據(jù)。

比起 自動(dòng)加載更多數(shù)據(jù) 略顯不智能。

需要注意頁面數(shù)據(jù)過多造成的卡頓。

當(dāng)用戶滾動(dòng)到頁面底部時(shí) 自動(dòng)加載更多數(shù)據(jù)。

更符合用戶直覺體驗(yàn)很好。

需要注意頁面數(shù)據(jù)過多造成的卡頓。

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

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

頁面數(shù)據(jù)過多造成的卡頓可以參考 每日 30 秒之 chunk 中給出的情景案例，利用 數(shù)據(jù)分組顯示 來減少 DOM 節(jié)點(diǎn)進(jìn)而優(yōu)化頁面卡頓，這里不討論分頁及其相關(guān)的優(yōu)化。

今天分享的代碼是分頁過程中會(huì)用到的一個(gè)函數(shù) 判斷是否到達(dá)了頁面底部：

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

窗口可見區(qū)域的高度 和 窗口已經(jīng)滾動(dòng)的距離高度 得到當(dāng)前頁面所處的位置：

document.documentElement.clientHeight + window.scrollY

再與 整個(gè)頁面的高度 作比較來判斷是否已經(jīng)到達(dá)了頁面底部，如果 整個(gè)頁面的高度 不存在則使用 窗口可見區(qū)域的高度 做代替：

... >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)
小技巧：利用 || 技巧來初始化數(shù)據(jù)
使用場景

做一個(gè)無限加載數(shù)據(jù)項(xiàng)的分頁功能，當(dāng)頁面到達(dá)底部時(shí)進(jìn)行數(shù)據(jù)加載。

// 監(jiān)聽頁面滾動(dòng)
document.addEventListener("scroll", () => {
    // 如果到達(dá)頁面底部
    if(bottomVisible()) {
        // 1.發(fā)送網(wǎng)絡(luò)請求獲取數(shù)據(jù)
        // 2.插入數(shù)據(jù)到頁面
    }
});
相似代碼

判斷是否到達(dá)了頁面頂部

const topVisible = () => window.scrollY == 0
一起成長 
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

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

本文原稿來自 PushMeTop

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109151.html

相關(guān)文章

  • 每日 30 秒 ? HTML Cosplay

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

    RichardXG 評論0 收藏0

  • 每日 30 秒 ? 巧用可視區(qū)域

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

    DevYK 評論0 收藏0

  • 每日 30 秒 ? 復(fù)制內(nèi)容到剪貼板

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

    Pandaaa 評論0 收藏0

  • 每日 30 秒 ? 數(shù)組所有數(shù)據(jù)是否滿足某條件

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

    FullStackDeveloper 評論0 收藏0

  • 每日 30 秒 ? 投懷送抱

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

    kevin 評論0 收藏0

發(fā)表評論

0條評論

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