Comment utiliser les composants de liste dans Mip

Cet article présente principalement l'utilisation des composants de liste dans MIP.

Le composant liste dans MIP (Mobile Web Accelerator) peut restituer des données synchrones, ou demander des données de manière asynchrone, puis les restituer.

Manuel de référence recommandé : "Manuel de documentation MIP"

Ci-dessous, nous vous donnerons une introduction détaillée à l'utilisation des composants de liste dans MIP à travers des exemples de code de composants .

Si nous voulons exécuter le composant list dans le fichier mip, nous devons introduire le script js suivant dans le corps du fichier 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>

Utilisation de base

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

1. 🎜>

Remarque : L'interface pour les requêtes asynchrones JSONP doit suivre le rappel de spécification en tant que « rappel ».

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

2. Modèle personnalisé

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

3. Synchroniser les données

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

4. Charger plus

Remarque : Lorsque a l'attribut has-more, la balise .nœud, et ce nœud a l'attribut on, la valeur de l'attribut est : tap : correspondant à l'id.more de mip-list

Introduction à l'attribut associé :

src : requête asynchrone Interface de données, s'il n'y a pas d'autres paramètres à la fin, veuillez ne pas l'inclure ?

données synchrones : utiliser l'attribut de commutateur de données synchrones

id : Y a-t-il un clic pour développer plus de fonctions ?

pnName : nom de la variable de changement de page

pn : numéro de page initial de changement de page, chaque demande en ajoutera automatiquement 1

preLoad : Charge les données de manière asynchrone. Si vous ajoutez le paramètre preLoad, la première page de contenu sera chargée lors de l'initialisation.

timeout : Délai d'attente pour la requête fetch-jsonp.

Cet article est une introduction à l'utilisation des composants de liste dans MIP. J'espère qu'il sera utile aux amis dans le besoin ! Ensuite, il existe des composants MIP plus courants, tels que le Composant Carrousel, le Composant Inline Frame, le Composant de menu Réduire, Composant de téléchargement de promotion d'application, Composant de formulaire Mip, Composant de retour rapide Mip, etc. Les amis intéressés peuvent également se référer à des articles connexes pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!