首頁  >  文章  >  每日程式設計  >  Mip中無限滾動元件是什麼

Mip中無限滾動元件是什麼

藏色散人
藏色散人原創
2018-11-06 17:01:363788瀏覽

本篇文章主要介紹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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn