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