超酷的 mip-infinitescroll 無限滾動（無限下拉）

時間 2019-11-09

標籤 mip infinitescroll 無限滾動下拉简体版

原文原文鏈接

寫在前面

無限滾動（又叫作無限下拉）技術被普遍應用於新聞類，圖片預覽類網站。對用戶來說，使用無限滾動的頁面有源源不斷的信息能夠預覽，增長用戶在頁面的停留時長。技術上原理也很簡單，在頁面加載時加載一部份內容，當用戶瀏覽到底部時想後端請求更多內容，顯示在頁面上。所以，繼 mip-list 列表組件以後，爲提高用戶體驗，開發了 mip-infinitescroll 無限滾動組件。css

簡介

mip-infinitescroll 是無限滾動組件，就像它的名字同樣，它會監聽指定 DOM 節點（固定爲 document.body）的滾動事件，當頁面滾動到底部的時候，會經過接口去異步請求數據 list，而後根據用戶指定的模板渲染成 html， append 到指定的容器中。html

mip-infinitescroll 初始化的時候會先請求一次數據，而後渲染到頁面上，此時，若是數據沒有鋪滿屏幕，則會繼續請求數據直到鋪滿屏幕。git

mip-infinitescroll 沒有作任何樣式限制，開發者能夠根據需求對組件在頁面中的樣式自行完善，也就是說，你想讓它長啥樣，它就長啥樣。github

示例

以下是 mip-infinitescroll 的一個效果展現，能夠看到在滑動頁面的過程當中，頁面底部的提示信息是loading，當所有數據加載完畢，頁面底部的提示信息展示爲over！ajax

屬性及子節點

要想在頁面中添加一個 mip-infinitescroll 組件，有一些屬性和其子節點是必需要有的，還能夠覆蓋 mip-infinitescroll 一些配置參數達到更完美的效果。json

data-src 屬性（必選項）後端

是異步請求數據的接口，須要支持 https；接口 callback 須要設置爲 'callback'；異步接口返回的數據須要知足以下格式：api
```
{
    "statsu": 0,
     "data": {
         "items":[]
     }
}
```
- status 0 表示請求成功app
- items: [] 是須要渲染的數據異步
.mip-infinitescroll-results 子節點（必選項）

是結果容器，每次異步請求數據以後，都會將對應的 html append 到這個容器中。例如給 div 加上 mip-infinitescroll-results class，那麼這個div就是結果容器，每次請求的數據渲染後的 html 都會 append 到這個 div 中。
.mip-infinitescroll-loading 子節點（必選項）

提示信息容器，在異步請求時、請求失敗以及請求成功三種狀態會有三種對應的提示信息。若是不設置則看不到提示信息。例如給 div 加上 mip-infinitescroll-loading class，那麼這個div就是提示信息的容器。
template 屬性（非必選項）

與模板 id 對應，用來標識所採用的模板，默認取組件子節點中的 template 模板。

script[type="application/json"] 子節點（非必選項）

<script type="application/json">
    {
        "rn": 15,                  // results number 想要顯示的結果總數
        "prn": 3,                  // page result number 每頁數量
        "pn": 1,                   // page number 頁碼
        "pnName": "pn",            // 表示頁碼的變量名
        "bufferHeightPx": 40,      // 緩衝高度, 距離底部必定高度時提早請求數據
        "loadingHtml": "loading",  // loading 狀態提示信息
        "loadFailHtml": "failed",  // 請求失敗 狀態提示信息
        "loadOverHtml": "over!"    // 請求成功 狀態提示信息
    }
</script>

MIP 官網文檔 mip-infinitescroll 無限滾動中對組件各個參數的說明、使用以及默認值等進行了詳細的說明。

使用

首先，構造一個符合 MIP 規範的頁面；而後，添加 mip-infinitescroll 組件腳本及 html 標籤；一個簡單的 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://mipcache.bdstatic.com/static/v1/mip.css">
        <link rel="canonical" href="//www.mipengine.org/">
        <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://mipcache.bdstatic.com/static/v1/mip.js"></script>
        <script src="http://mipcache.bdstatic.com/static/v1/mip-infinitescroll/mip-infinitescroll.js"></script>
        <script src="http://mipcache.bdstatic.com/static/v1/mip-mustache/mip-mustache.js"></script>
    </body>
</html>

寫在後面

有任何問題能夠到 github issues 提問。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。