成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

每日 30 秒 ? 判斷是否為頁(yè)面底部

callmewhy / 3582人閱讀

簡(jiǎn)介 
分頁(yè)、優(yōu)化、可視區(qū)域、無(wú)限加載

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

常見(jiàn)的分頁(yè)方式有三種：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

document.documentElement.clientHeight + window.scrollY

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

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

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

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

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

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

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

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

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

本文原稿來(lái)自 PushMeTop

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109151.html

相關(guān)文章

  • 每日 30 秒 ? HTML Cosplay

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

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

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

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

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

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

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

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

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

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

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

  • 每日 30 秒 ? 投懷送抱

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<