So verwenden Sie Listenkomponenten in Mip

In diesem Artikel wird hauptsächlich die Verwendung von Listenkomponenten in MIP vorgestellt.

Die Listenkomponente in MIP (Mobile Web Accelerator) kann synchrone Daten rendern oder Daten asynchron anfordern und dann rendern.

Empfohlenes Referenzhandbuch: „MIP-Dokumentationshandbuch“

Nachfolgend geben wir Ihnen anhand von Komponentencodebeispielen eine detaillierte Einführung in die Verwendung von Listenkomponenten in MIP .

Wenn wir die Listenkomponente in der MIP-Datei ausführen möchten, müssen wir das folgende js-Skript in den Hauptteil der MIP-Datei einfügen:

<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. Grundlegende Verwendung

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

Hinweis: Die Schnittstelle für asynchrone JSONP-Anfragen muss dem Spezifikationsrückruf als „Rückruf“ folgen.

2. Benutzerdefinierte Vorlage

<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. Synchronisierte Daten

<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>

Klicken Sie, um mehr zu laden

<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>

Hinweis: Wenn das has-more-Attribut hat, muss das ein id-Attribut und einen DOM-Knoten zum Klicken auf die Schaltfläche haben, und dieser Knoten muss ein Attribut haben, der Attributwert ist: tap: entsprechend der id.more von mip-list

Einführung in verwandte Attribute:

src: Datenschnittstelle für asynchrone Anfragen, wenn es keine anderen gibt. Bitte das Ende des Parameters nicht angeben?

synchronous-data: Synchronous-Data-Switch-Attribut verwenden

id: has-more: Gibt es einen Klick, um weitere Funktionen zu erweitern?

pnName: Name der Umblättervariable

pn: Anfangsseitennummer des Umblätterns, bei jeder Anfrage wird automatisch 1 hinzugefügt

preLoad: Daten asynchron laden. Wenn Sie den preLoad-Parameter hinzufügen, wird die erste Seite des Inhalts während der Initialisierung geladen.

timeout: Zeitüberschreitung für die fetch-jsonp-Anfrage.

Dieser Artikel ist eine Einführung in die Verwendung von Listenkomponenten in MIP. Ich hoffe, dass er Freunden in Not hilfreich sein wird! Dann gibt es gängigere MIP-Komponenten, wie zum Beispiel

Karussellkomponente

,

Inline-Frame-Komponente, Menü-Komprimierungskomponente, App-Promotion-Download-Komponente, Mip-Formularkomponente, Mip-Schnellrückgabekomponente usw. Interessierte Freunde können sich zum Lernen auch auf verwandte Artikel beziehen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Listenkomponenten in Mip. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!