wxapp img loader

wxapp-img-loader

Dies ist eine native Komponente zum Vorladen von Bildern, die für WeChat-Miniprogramme geeignet ist ( wenn Sie Taro verwenden, wechseln Sie bitte in den Taro-Zweig ). Sie wurde in vielen Miniprogrammen wie JD Shopping verwendet. Die Verwendungsschritte sind wie folgt:

1. Kopieren Sie das img-loader-Verzeichnis in Ihr Projekt

2. Fügen Sie der WXML-Datei der Seite den folgenden Code hinzu, um die Komponentenvorlage einzuführen

 < import src =" ../../img-loader/img-loader.wxml " />
< template is =" img-loader " data =" {{ imgLoadList }} " > </ template >

3. Fügen Sie Komponentenskripte in die JS-Datei der Seite ein

 const ImgLoader = require ( '../../img-loader/img-loader.js' )

4. Instanziieren Sie ein ImgLoader-Objekt und übergeben Sie dieses (aktuelles Seitenobjekt). Der zweite Parameter ist optional und die Standardrückrufmethode für den Abschluss des Bildladens.

 this . imgLoader = new ImgLoader ( this )

5. Rufen Sie die Lademethode der ImgLoader-Instanz auf, um das Bild zu laden. Der erste Parameter ist der Bildlink, und der zweite Parameter ist optional und die Rückrufmethode beim Laden des Bildes.

 this . imgLoader . load ( imgUrlOriginal , ( err , data ) => {
    console . log ( '图片加载完成' , err , data . src , data . width , data . height )
} )

Hinweis: Der erste Parameter der Rückrufmethode nach Abschluss des Bildladens ist die Fehlermeldung (null, wenn das Laden erfolgreich ist), und der zweite Parameter sind die Bildinformationen (Objekttyp, einschließlich Quelle, Breite und Höhe).

Informationen zur Verwendungsmethode finden Sie in den Beispielen im Demoverzeichnis, einschließlich Szenarien zum Laden eines einzelnen Bildes und zum Laden mehrerer Bilder. Der laufende Effekt ist in der folgenden Abbildung dargestellt:

-eof-