本篇文章主要介紹MIP中無限滾動元件。
MIP即行動網頁加速器。而MIP中的無限滾動組件(mip-infinitescroll 無限滾動),也就是表示當用戶滾動到頁面底部時,異步加載更多數據,通常情況下適用於資訊推薦。
這種效果就相當於我們在手機淘寶購物時,滑動列表商品時,會不斷地載入新的商品資料。顯然這種無限滾動加載的效果在我們日常專案中也是很常見的。
推薦參考詳細手冊:《MIP文件手冊》
下面我們就結合組件程式碼給大家詳細介紹MIP中的無限滾動組件。
MIP中無限滾動元件程式碼範例如下:
<mip-infinitescroll data-src="xxx" template="myTemplate"> <script type="application/json"> { "rn": 40, "pn": 1, "prn": 6, "pnName": "pn", "bufferHeightPx": 40, "timeout": 5000, "loadingHtml": "更多数据正在路上", "loadFailHtml": "数据加载失败啦", "loadOverHtml": "没有数据了哦" } </script> <template type="mip-mustache" id="myTemplate"> <li> <mip-img src="{{img}}" layout="responsive" width="100" height="100"> </mip-img> <p>序号:{{number}}</p> </li> </template> <div class="mip-infinitescroll-results"></div> <div class="bg"> <div class="mip-infinitescroll-loading"></div> </div> </mip-infinitescroll>
在mip檔案中運用無限捲動元件時,必須引入以下兩個js腳本
<script src="https://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js"> </script> <script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"> </script>
相關屬性介紹:
data-src:非同步請求資料介面(僅支援JSONP 請求)
template:與範本id對應,用來識別所採用的模板,如不設置,則預設取組件子節點中的d477f9ce7bf77f53fbcf36bec1b69b7a
rn:results number,需要顯示的結果總數。預設值:20
pn:page number,請求第幾頁。預設值:1
prn:page result number,每次請求所請求的資料條數。預設值:6
pnName:翻頁關鍵字。預設值:pn
bufferHeightPx:緩衝高度,距離底部一定高度時提前請求資料。預設值:10
loadingHtml:loading 時提示文案。預設值:載入中...
loadFailHtml:載入失敗時提示文案,當非同步請求逾時或失敗時觸發。預設值:載入失敗
loadOverHtml:載入完畢時提示文案。預設值:載入完畢。預設值:載入完畢
timeout:fetch-jsonp 請求的逾時時間。單位是ms,預設值為5000。
注意:
1、非同步請求介面必須是HTTPS
2、非同步請求介面需要規範callback 為'callback'
3、介面傳回的資料格式需要是如下格式:
{ "status": 0, "data": { "items": [{}, {}] } }
其中status: 0 表示請求成功。 items: 是需要渲染的資料。
這篇文章就是關於MIP中無限滾動組件的介紹,也是比較簡單易懂,希望對需要的朋友有幫助!
以上是Mip中無限滾動元件是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!