Mip でリストコンポーネントを使用する方法-HTMLの知識-php.cn

Mip でリストコンポーネントを使用する方法

藏色散人

リリース： 2018-11-06 17:04:01

オリジナル

3629 人が閲覧しました

この記事では主に MIP でのリストコンポーネントの使用方法を紹介します。

MIP (Mobile Web Accelerator) のリストコンポーネントは、同期データをレンダリングすることも、データを非同期に要求した後にデータをレンダリングすることもできます。

推奨参考マニュアル：「MIP Documentation Manual」

MIP におけるリストコンポーネントの使い方を、コンポーネントのコード例を通して詳しく紹介します。

mip ファイル内のリストコンポーネントを実行したい場合は、次の js スクリプトを mip ファイル本体に導入する必要があります:

<script src="https://c.mipcdn.com/static/v1/mip-list/mip-list.js"> </script>
<script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"> </script>

ログイン後にコピー

1. 基本的な使用法

<mip-list src="https://xxx" preLoad>
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>

ログイン後にコピー

注: JSONP 非同期リクエストのインターフェイスは、仕様コールバックに「コールバック」として従う必要があります。

2. カスタマイズされたテンプレート

<mip-list template="mip-template-id" src="https://xxx" preLoad>
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>

ログイン後にコピー

3. 同期されたデータ

<mip-list synchronous-data>
    <script type="application/json">
        {            "items": [
                {                    "name": "lee",                    "alias": "xialong"
                }, {                    "name": "ruige",                    "alias": "ruimm"
                }, {                    "name": "langbo",                    "alias": "bobo"
                }
            ]
        }    </script>
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>

ログイン後にコピー

4. クリックして詳細を読み込みます

<mip-list 
    template="mip-template-id"
    src="http://xxx?a=a&b=b"
    id="mip-list"
    has-more
    pnName="pageNum"
    pn=2
    timeout="3000"
    preLoad>
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>{{key}}: {{value}}</li>
        </div>
    </template></mip-list><div class="mip-list-more" on="tap:mip-list.more"> 点击查看更多 </div>

ログイン後にコピー

注: has-more 属性がある場合、タグには id 属性が必要であり、クリックするための DOM ノードが必要です。ボタン、このノードには on 属性が必要です。属性値は次のとおりです: Tap: mip-list の id.more に対応します

関連属性の紹介:

src : 非同期リクエスト用のデータインターフェイス (他にない場合) パラメーターの末尾は含めないでください。

synchronous-data: 同期データスイッチ属性を使用します

id:コンポーネント id

has-more:クリックするとさらに多くの機能を展開できますか?

pnName: ページめくり変数名

pn: ページめくりの最初のページ番号。リクエストごとに自動的に 1
が追加されます。

preLoad: preLoad パラメータを追加すると、初期化中にコンテンツの最初のページがロードされます。

##timeout: fetch-jsonp リクエストのタイムアウト。

この記事は、MIP でのリストコンポーネントの使用方法を紹介するもので、困っている友人の役に立てば幸いです。さらに、

カルーセルコンポーネント、インラインフレームコンポーネント、折りたたみメニューコンポーネント、アプリプロモーションダウンロードコンポーネントなど、より一般的な MIP コンポーネントもあります。 Mip フォームコンポーネント、Mip クイックリターンコンポーネントなど。興味のある方は、関連記事を参照して学習することもできます。

以上がMip でリストコンポーネントを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。