【转】超酷的 mip-infinitescroll 无限滚动（无限下拉）
寫在前面
無(wú)限滾動(dòng)技術(shù)（又叫做無(wú)限下拉技術(shù)）被廣泛應(yīng)用于新聞?lì)?#xff0c;圖片預(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)（別名：無(wú)限下拉）組件，就像它的名字一樣，它會(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)）
<script type="application/json">{"rn": 15, // results number 想要顯示的結(jié)果總數(shù)"prn": 3, // page result number 每頁(yè)數(shù)量"pn": 1, // page number 頁(yè)碼"pnName": "pn", // 表示頁(yè)碼的變量名"bufferHeightPx": 40, // 緩沖高度 , 距離底部一定高度時(shí)提前請(qǐng)求數(shù)據(jù)"loadingHtml": "loading", // loading 狀態(tài)提示信息"loadFailHtml": "failed", // 請(qǐng)求失敗 狀態(tài)提示信息"loadOverHtml": "over!" // 請(qǐng)求成功 狀態(tài)提示信息} </script>
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 就完成了。
<!DOCTYPE html> <html mip><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css"><!--canonical 中的鏈接填寫對(duì)應(yīng)的非 mip 頁(yè)地址--><link rel="canonical" href="https://www.mipengine.org/test_xxx.html"><title>Hello MIP</title><style mip-custom></style></head><body>Hello MIP!<mip-infinitescroll data-src="https://your/ajax/api" template="myTemplate"><script type="application/json">{"rn": 15,"prn": 3,"pn": 1,"pnName": "pn","bufferHeightPx": 40,"loadingHtml": "loading","loadFailHtml": "failed","loadOverHtml": "over!"}</script><template type="mip-mustache" id="myTemplate"><li><mip-img layout="responsive"width="600"height="120"src="{{img}}"></mip-img><p> 第{{number}}張圖 </p></li></template><div class="mip-infinitescroll-results"></div><div class="mip-infinitescroll-loading"></div></mip-infinitescroll><script src="https://c.mipcdn.com/static/v1/mip.js"></script><script src="http://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js"></script><script src="http://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script></body> </html>總結(jié)
以上是生活随笔為你收集整理的【转】超酷的 mip-infinitescroll 无限滚动（无限下拉）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Shell字符串操作集合
- 下一篇： UVA340 Master