Mip の無限スクロール コンポーネントとは何ですか

この記事では、MIP の無限スクロール コンポーネントを主に紹介します。

MIP は モバイル Web ページ アクセラレータ です。 MIP の無限スクロール コンポーネント (mip-infinitescroll 無限スクロール ) は、ユーザーがページの一番下までスクロールすると、より多くのデータが非同期で読み込まれることを意味します。これは通常、情報の推奨に適しています。

この効果は、モバイル淘宝網で買い物をしているときと同じで、商品リストをスライドさせると、新しい商品データが継続的に読み込まれます。明らかに、この無限スクロール読み込み効果は、日常のプロジェクトでも非常に一般的です。

詳細なマニュアルを参照することをお勧めします: 「MIP Documentation Manual」

以下に、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 ファイルで無限スクロール コンポーネントを使用する場合、次の 2 つの 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 に対応し、使用されるテンプレートを識別するために使用されます。設定されていない場合、コンポーネント サブノードの