Quel est le composant de défilement infini dans Mip

Cet article vous présente principalement le composant de défilement infini dans MIP.

MIP est un Accélérateur Web mobile. Le composant de défilement infini dans MIP (mip-infinitescroll infinite scroll ) signifie que lorsque l'utilisateur fait défiler vers le bas de la page, davantage de données sont chargées de manière asynchrone, ce qui convient généralement à la recommandation d'informations.

Cet effet est équivalent à lorsque nous faisons des achats sur mobile Taobao, lorsque nous faisons glisser la liste des produits, de nouvelles données de produits seront chargées en continu. Évidemment, cet effet de chargement par défilement infini est également très courant dans nos projets quotidiens.

Il est recommandé de se référer au manuel détaillé : "Manuel de documentation MIP"

Ci-dessous, nous présenterons en détail le composant de défilement infini dans MIP en fonction du code du composant .

L'exemple de code du composant de défilement infini dans MIP est le suivant :

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

Lors de l'utilisation du composant de défilement infini dans le fichier MIP, les deux éléments suivants js doit être introduit Script

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

Introduction aux attributs associés :

data-src : interface de données de requête asynchrone (prend uniquement en charge les requêtes JSONP)

template : Correspond à l'identifiant du modèle, utilisé pour identifier le modèle utilisé. S'il n'est pas défini, le d477f9ce7bf77f53fbcf36bec1b69b7a

rn dans le sous-nœud du composant sera pris par défaut : le numéro du résultat, le nombre total de résultats à afficher. Valeur par défaut : 20

pn : numéro de page, quelle page demander. Valeur par défaut : 1

prn : numéro de résultat de la page, le nombre de données demandées pour chaque requête. Valeur par défaut : 6

pnName : Mot-clé de tournage de page. Valeur par défaut : pn

bufferHeightPx : hauteur du tampon, demander les données à l'avance lorsqu'elle se trouve à une certaine hauteur à partir du bas. Valeur par défaut : 10

loadingHtml : Copie rapide lors du chargement. Valeur par défaut : Loading...

loadFailHtml : copie d'invite en cas d'échec du chargement, déclenchée lorsque la requête asynchrone expire ou échoue. Valeur par défaut : Échec du chargement

loadOverHtml : Copie rapide une fois le chargement terminé. Valeur par défaut : Chargé. Valeur par défaut : Chargement terminé

timeout : délai d'attente pour la requête fetch-jsonp. L'unité est ms et la valeur par défaut est 5000.

Remarque :

1. L'interface de requête asynchrone doit être HTTPS

2 L'interface de requête asynchrone doit spécifier le rappel comme « rappel ».

3. Le format des données renvoyées par l'interface doit être au format suivant :

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

où statut : 0 signifie que la demande est réussie. items : ce sont les données qui doivent être restituées.

Cet article est une introduction au composant de défilement infini dans MIP. Il est également relativement simple et facile à comprendre. J'espère qu'il sera utile aux amis dans le besoin !

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!