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

資訊專欄INFORMATION COLUMN

超酷的 mip-infinitescroll 無(wú)限滾動(dòng)（無(wú)限下拉）

CloudwiseAPM / 1532人閱讀

摘要：寫(xiě)在前面無(wú)限滾動(dòng)又叫做無(wú)限下拉技術(shù)被廣泛應(yīng)用于新聞?lì)悾瑘D片預(yù)覽類網(wǎng)站。因此，繼列表組件之后，為提升用戶體驗(yàn)，開(kāi)發(fā)了無(wú)限滾動(dòng)組件。屬性非必選項(xiàng)與模板對(duì)應(yīng)，用來(lái)標(biāo)識(shí)所采用的模板，默認(rèn)取組件子節(jié)點(diǎn)中的模板。

寫(xiě)在前面

無(wú)限滾動(dòng)（又叫做無(wú)限下拉）技術(shù)被廣泛應(yīng)用于新聞?lì)?，圖片預(yù)覽類網(wǎng)站。對(duì)用戶來(lái)講，使用無(wú)限滾動(dòng)的頁(yè)面有源源不斷的信息可以預(yù)覽，增加用戶在頁(yè)面的停留時(shí)長(zhǎng)。技術(shù)上原理也很簡(jiǎn)單，在頁(yè)面加載時(shí)加載一部分內(nèi)容，當(dāng)用戶瀏覽到底部時(shí)想后端請(qǐng)求更多內(nèi)容，顯示在頁(yè)面上。因此，繼 mip-list 列表組件之后，為提升用戶體驗(yàn)，開(kāi)發(fā)了 mip-infinitescroll 無(wú)限滾動(dòng)組件。

簡(jiǎn)介

mip-infinitescroll 是無(wú)限滾動(dòng)組件，就像它的名字一樣，它會(huì)監(jiān)聽(tīng)指定 DOM 節(jié)點(diǎn)（固定為 document.body）的滾動(dòng)事件，當(dāng)頁(yè)面滾動(dòng)到底部的時(shí)候，會(huì)通過(guò)接口去異步請(qǐng)求數(shù)據(jù) list，然后根據(jù)用戶指定的模板渲染成 html， append 到指定的容器中。

mip-infinitescroll 初始化的時(shí)候會(huì)先請(qǐng)求一次數(shù)據(jù)，然后渲染到頁(yè)面上，此時(shí)，如果數(shù)據(jù)沒(méi)有鋪滿屏幕，則會(huì)繼續(xù)請(qǐng)求數(shù)據(jù)直到鋪滿屏幕。

mip-infinitescroll 沒(méi)有做任何樣式限制，開(kāi)發(fā)者可以根據(jù)需求對(duì)組件在頁(yè)面中的樣式自行完善，也就是說(shuō)，你想讓它長(zhǎng)啥樣，它就長(zhǎng)啥樣。

示例

如下是 mip-infinitescroll 的一個(gè)效果展示，可以看到在滑動(dòng)頁(yè)面的過(guò)程中，頁(yè)面底部的提示信息是loading，當(dāng)全部數(shù)據(jù)加載完畢，頁(yè)面底部的提示信息展現(xiàn)為over！

屬性及子節(jié)點(diǎn)

要想在頁(yè)面中添加一個(gè) mip-infinitescroll 組件，有一些屬性和其子節(jié)點(diǎn)是必須要有的，還可以覆蓋 mip-infinitescroll 一些配置參數(shù)達(dá)到更完美的效果。

data-src 屬性（必選項(xiàng)）

是異步請(qǐng)求數(shù)據(jù)的接口，需要支持 https；接口 callback 需要設(shè)置為 "callback"；異步接口返回的數(shù)據(jù)需要滿足如下格式：

{
    "statsu": 0,
     "data": {
         "items":[]
     }
}

status 0 表示請(qǐng)求成功

items: [] 是需要渲染的數(shù)據(jù)

.mip-infinitescroll-results 子節(jié)點(diǎn)（必選項(xiàng)）

是結(jié)果容器，每次異步請(qǐng)求數(shù)據(jù)之后，都會(huì)將對(duì)應(yīng)的 html append 到這個(gè)容器中。例如給 div 加上 mip-infinitescroll-results class，那么這個(gè)div就是結(jié)果容器，每次請(qǐng)求的數(shù)據(jù)渲染后的 html 都會(huì) append 到這個(gè) div 中。

.mip-infinitescroll-loading 子節(jié)點(diǎn)（必選項(xiàng)）

提示信息容器，在異步請(qǐng)求時(shí)、請(qǐng)求失敗以及請(qǐng)求成功三種狀態(tài)會(huì)有三種對(duì)應(yīng)的提示信息。如果不設(shè)置則看不到提示信息。例如給 div 加上 mip-infinitescroll-loading class，那么這個(gè)div就是提示信息的容器。

template 屬性（非必選項(xiàng)）

與模板 id 對(duì)應(yīng)，用來(lái)標(biāo)識(shí)所采用的模板，默認(rèn)取組件子節(jié)點(diǎn)中的 template 模板。

script[type="application/json"] 子節(jié)點(diǎn)（非必選項(xiàng)）

MIP 官網(wǎng)文檔 mip-infinitescroll 無(wú)限滾動(dòng) 中對(duì)組件各個(gè)參數(shù)的說(shuō)明、使用以及默認(rèn)值等進(jìn)行了詳細(xì)的說(shuō)明。

使用

首先，構(gòu)造一個(gè)符合 MIP 規(guī)范的頁(yè)面；然后，添加 mip-infinitescroll 組件腳本及 html 標(biāo)簽；一個(gè)簡(jiǎn)單的 demo 就完成了。



    
        
        
        
        
        Hello MIP
        
    
    
        Hello MIP!
寫(xiě)在后面

有任何問(wèn)題可以到 github issues 提問(wèn)。

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

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

相關(guān)文章

  • 設(shè)計(jì)無(wú)限滾動(dòng)下拉加載，實(shí)踐高性能頁(yè)面真諦

    摘要：論壇上有過(guò)這么一篇熱門(mén)文章，它從角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。無(wú)限滾動(dòng)加載背后的技術(shù)挑戰(zhàn)其實(shí)比想象中要多不少。整體思路和方案設(shè)計(jì)我們要實(shí)現(xiàn)的頁(yè)面樣例如圖，它能夠做到無(wú)限下拉加載內(nèi)容。 UX Planet論壇上有過(guò)這么一篇熱門(mén)文章: Infinite Scrolling Best Practices，它從UX角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。 無(wú)限滾動(dòng)加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...

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

  • 設(shè)計(jì)無(wú)限滾動(dòng)下拉加載，實(shí)踐高性能頁(yè)面真諦

    摘要：論壇上有過(guò)這么一篇熱門(mén)文章，它從角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。無(wú)限滾動(dòng)加載背后的技術(shù)挑戰(zhàn)其實(shí)比想象中要多不少。整體思路和方案設(shè)計(jì)我們要實(shí)現(xiàn)的頁(yè)面樣例如圖，它能夠做到無(wú)限下拉加載內(nèi)容。 UX Planet論壇上有過(guò)這么一篇熱門(mén)文章: Infinite Scrolling Best Practices，它從UX角度分析了無(wú)限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。 無(wú)限滾動(dòng)加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...

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

  • vue實(shí)現(xiàn)下拉加載根本沒(méi)那么復(fù)雜

    摘要：一直不知道上拉加載，下拉刷新是怎么實(shí)現(xiàn)的?，F(xiàn)在正好有個(gè)產(chǎn)品有這樣一個(gè)需求。我只是需要實(shí)現(xiàn)一個(gè)下拉加載，不需要其他這么多的功能。看了看其他人的源碼，直接擼了起來(lái)，實(shí)現(xiàn)一個(gè)組件。 之前缺乏移動(dòng)端的經(jīng)驗(yàn)。一直不知道上拉加載，下拉刷新是怎么實(shí)現(xiàn)的?，F(xiàn)在正好有個(gè)產(chǎn)品有這樣一個(gè)需求。想了一會(huì)沒(méi)有思路。就去找插件。啥vue-infinite-scroll，vue-virtual-scroll-lis...

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

  • 【譯】無(wú)限滾動(dòng)加載最佳實(shí)踐

    摘要：優(yōu)秀無(wú)限滾動(dòng)的五項(xiàng)原則將無(wú)限滾動(dòng)做好，并不是不可能完成的任務(wù)。提供為特定項(xiàng)添加書(shū)簽的可能無(wú)限滾動(dòng)最常見(jiàn)的缺點(diǎn)之一就是，內(nèi)容出現(xiàn)的時(shí)候，沒(méi)法添加書(shū)簽。結(jié)論無(wú)限滾動(dòng)實(shí)現(xiàn)得好的話，可以達(dá)到令人難以置信的光滑無(wú)縫體驗(yàn)。 本文轉(zhuǎn)載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/673原文：https://uxplanet.org/infinite-scrolli...

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

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

0條評(píng)論

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