超酷的 mip-infinitescroll 無限滾動（無限下拉）

CloudwiseAPM 發布于2019-08-20 15:09 / 1435人閱讀

摘要：寫在前面無限滾動又叫做無限下拉技術被廣泛應用于新聞類，圖片預覽類網站。因此，繼列表組件之后，為提升用戶體驗，開發了無限滾動組件。屬性非必選項與模板對應，用來標識所采用的模板，默認取組件子節點中的模板。

寫在前面

無限滾動（又叫做無限下拉）技術被廣泛應用于新聞類，圖片預覽類網站。對用戶來講，使用無限滾動的頁面有源源不斷的信息可以預覽，增加用戶在頁面的停留時長。技術上原理也很簡單，在頁面加載時加載一部分內容，當用戶瀏覽到底部時想后端請求更多內容，顯示在頁面上。因此，繼 mip-list 列表組件之后，為提升用戶體驗，開發了 mip-infinitescroll 無限滾動組件。

簡介

mip-infinitescroll 是無限滾動組件，就像它的名字一樣，它會監聽指定 DOM 節點（固定為 document.body）的滾動事件，當頁面滾動到底部的時候，會通過接口去異步請求數據 list，然后根據用戶指定的模板渲染成 html， append 到指定的容器中。

mip-infinitescroll 初始化的時候會先請求一次數據，然后渲染到頁面上，此時，如果數據沒有鋪滿屏幕，則會繼續請求數據直到鋪滿屏幕。

mip-infinitescroll 沒有做任何樣式限制，開發者可以根據需求對組件在頁面中的樣式自行完善，也就是說，你想讓它長啥樣，它就長啥樣。

示例

如下是 mip-infinitescroll 的一個效果展示，可以看到在滑動頁面的過程中，頁面底部的提示信息是loading，當全部數據加載完畢，頁面底部的提示信息展現為over！

屬性及子節點

要想在頁面中添加一個 mip-infinitescroll 組件，有一些屬性和其子節點是必須要有的，還可以覆蓋 mip-infinitescroll 一些配置參數達到更完美的效果。

data-src 屬性（必選項）

是異步請求數據的接口，需要支持 https；接口 callback 需要設置為 "callback"；異步接口返回的數據需要滿足如下格式：

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

status 0 表示請求成功

items: [] 是需要渲染的數據

.mip-infinitescroll-results 子節點（必選項）

是結果容器，每次異步請求數據之后，都會將對應的 html append 到這個容器中。例如給 div 加上 mip-infinitescroll-results class，那么這個div就是結果容器，每次請求的數據渲染后的 html 都會 append 到這個 div 中。

.mip-infinitescroll-loading 子節點（必選項）

提示信息容器，在異步請求時、請求失敗以及請求成功三種狀態會有三種對應的提示信息。如果不設置則看不到提示信息。例如給 div 加上 mip-infinitescroll-loading class，那么這個div就是提示信息的容器。

template 屬性（非必選項）

與模板 id 對應，用來標識所采用的模板，默認取組件子節點中的 template 模板。

script[type="application/json"] 子節點（非必選項）

MIP 官網文檔 mip-infinitescroll 無限滾動中對組件各個參數的說明、使用以及默認值等進行了詳細的說明。

使用

首先，構造一個符合 MIP 規范的頁面；然后，添加 mip-infinitescroll 組件腳本及 html 標簽；一個簡單的 demo 就完成了。

寫在后面

有任何問題可以到 github issues 提問。

云服務器 GPU云服務器無限滾動無限下拉列表 js上拉無限滾動無限的云存儲

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

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

設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰其實比想象中要多不少。整體思路和方案設計我們要實現的頁面樣例如圖，它能夠做到無限下拉加載內容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯網上到處都有應用：豆瓣...

Hanks10100 2019-08-20 14:39 評論0 收藏0
設計無限滾動下拉加載，實踐高性能頁面真諦

摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設計實踐。無限滾動加載背后的技術挑戰其實比想象中要多不少。整體思路和方案設計我們要實現的頁面樣例如圖，它能夠做到無限下拉加載內容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設計實踐。無限滾動加載在互聯網上到處都有應用：豆瓣...

novo 2019-08-01 16:25 評論0 收藏0
vue實現下拉加載根本沒那么復雜

摘要：一直不知道上拉加載，下拉刷新是怎么實現的。現在正好有個產品有這樣一個需求。我只是需要實現一個下拉加載，不需要其他這么多的功能。看了看其他人的源碼，直接擼了起來，實現一個組件。之前缺乏移動端的經驗。一直不知道上拉加載，下拉刷新是怎么實現的。現在正好有個產品有這樣一個需求。想了一會沒有思路。就去找插件。啥vue-infinite-scroll，vue-virtual-scroll-lis...

wh469012917 2019-08-26 10:44 評論0 收藏0
【譯】無限滾動加載最佳實踐

摘要：優秀無限滾動的五項原則將無限滾動做好，并不是不可能完成的任務。提供為特定項添加書簽的可能無限滾動最常見的缺點之一就是，內容出現的時候，沒法添加書簽。結論無限滾動實現得好的話，可以達到令人難以置信的光滑無縫體驗。本文轉載自：眾成翻譯譯者：文藺鏈接：http://www.zcfy.cc/article/673原文：https://uxplanet.org/infinite-scrolli...

Sunxb 2019-08-19 18:37 評論0 收藏0