Mip中無限滾動元件是什麼

本篇文章主要介紹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對應，用來識別所採用的模板，如不設置，則預設取組件子節點中的

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中文網其他相關文章！