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 に対応し、使用されるテンプレートを識別するために使用されます。設定されていない場合、コンポーネント サブノードの

rn がデフォルトで取得されます: 結果番号、結果の合計数。表示されるようになります。デフォルト値: 20

pn: ページ番号、リクエストするページ。デフォルト値: 1

prn: ページ結果番号、各リクエストでリクエストされたデータの数。デフォルト値: 6

pnName: ページめくりのキーワード。デフォルト値: pn

bufferHeightPx: バッファ高さ、下から一定の高さになったときに事前にデータを要求します。デフォルト値: 10

loadingHtml: ロード時にコピーを求めるプロンプト。デフォルト値: Loading...

loadFailHtml: ロード失敗時のプロンプトコピー。非同期リクエストがタイムアウトするか失敗したときにトリガーされます。デフォルト値: 読み込み失敗

loadOverHtml: 読み込み完了時にコピーを求めるプロンプト。デフォルト値: ロード済み。デフォルト値: 読み込み完了

timeout: fetch-jsonp リクエストのタイムアウト。単位はミリ秒で、デフォルト値は 5000 です。

注:

1. 非同期リクエスト インターフェイスは HTTPS

2 である必要があります。非同期リクエスト インターフェイスはコールバックを「callback」として指定する必要があります。

3. インターフェイスから返されるデータ形式は次の形式である必要があります:

{    "status": 0, 
    "data": { 
        "items": [{}, {}]
    }
}

このうち、status: 0 はリクエストが成功したことを示します。 items: レンダリングする必要があるデータです。

この記事は MIP の無限スクロール コンポーネントの紹介であり、比較的シンプルで理解しやすいものです。困っている友人に役立つことを願っています。

以上がMip の無限スクロール コンポーネントとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。