Was ist die unendliche Scroll-Komponente in Mip?

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>

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>

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 d477f9ce7bf77f53fbcf36bec1b69b7a

rn im Komponenten-Unterknoten verwendet: Ergebnisnummer, die Gesamtzahl der Ergebnisse angezeigt werden. Standardwert: 20

pn: Seitenzahl, welche Seite angefordert werden soll. Standardwert: 1

prn: Seitenergebnisnummer, die Anzahl der für jede Anfrage angeforderten Daten. Standardwert: 6

pnName: Schlüsselwort zum Umblättern. Standardwert: pn

bufferHeightPx: Pufferhöhe, Daten im Voraus anfordern, wenn sie eine bestimmte Höhe vom Boden haben. Standardwert: 10

loadingHtml: Kopieren beim Laden auffordern. Standardwert: Loading...

loadFailHtml: Aufforderung zum Kopieren, wenn der Ladevorgang fehlschlägt, ausgelöst, wenn die asynchrone Anforderung abläuft oder fehlschlägt. Standardwert: Laden fehlgeschlagen

loadOverHtml: Kopieren auffordern, wenn der Ladevorgang abgeschlossen ist. Standardwert: Geladen. Standardwert: Laden abgeschlossen

Timeout: Timeout für fetch-jsonp-Anfrage. Die Einheit ist ms und der Standardwert ist 5000.

Hinweis:

1. Die asynchrone Anforderungsschnittstelle muss HTTPS sein

2. Die asynchrone Anforderungsschnittstelle muss den Rückruf als „Callback“ angeben.

3. Das von der Schnittstelle zurückgegebene Datenformat muss das folgende Format haben:

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

Status: 0 bedeutet, dass die Anfrage erfolgreich ist. Elemente: sind die Daten, die gerendert werden müssen.

Dieser Artikel ist eine Einführung in die Infinite-Scroll-Komponente in MIP. Er ist auch relativ einfach und leicht zu verstehen. Ich hoffe, er wird für Freunde in Not hilfreich sein.

Das obige ist der detaillierte Inhalt vonWas ist die unendliche Scroll-Komponente in Mip?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!