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