Heim > tägliche Programmierung > HTML-Kenntnisse > Was ist die unendliche Scroll-Komponente in Mip?

Was ist die unendliche Scroll-Komponente in Mip?

藏色散人
Freigeben: 2018-11-06 17:01:36
Original
3828 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich die Infinite-Scroll-Komponente in MIP vor.

MIP ist Mobile Web Accelerator. Die unendliche Bildlaufkomponente in MIP (mip-infinitescroll unendlicher Bildlauf ) bedeutet, dass beim Scrollen des Benutzers zum Ende der Seite mehr Daten asynchron geladen werden, was normalerweise für Informationsempfehlungen geeignet ist.

Dieser Effekt entspricht dem, wenn wir auf dem mobilen Taobao einkaufen. Wenn wir die Produktliste verschieben, werden kontinuierlich neue Produktdaten geladen. Offensichtlich ist dieser Endlos-Scroll-Loading-Effekt auch in unseren täglichen Projekten sehr verbreitet.

Es wird empfohlen, das ausführliche Handbuch zu lesen: „MIP-Dokumentationshandbuch

Nachfolgend stellen wir die Infinite-Scroll-Komponente in MIP anhand des Komponentencodes ausführlich vor .

Das Codebeispiel der Infinite-Scrolling-Komponente in MIP lautet wie folgt:

<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>
Nach dem Login kopieren

Bei Verwendung der Infinite-Scrolling-Komponente in der MIP-Datei müssen die folgenden zwei JS-Skripte verwendet werden vorgestellt werden

<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>
Nach dem Login kopieren

Einführung in verwandte Attribute:

data-src: asynchrone Anforderungsdatenschnittstelle (unterstützt nur JSONP-Anfragen)

Vorlage : und Vorlagen-ID Entsprechend, wird zur Identifizierung der verwendeten Vorlage verwendet. Wenn nicht festgelegt, wird standardmäßig die