wxapp img loader

carregador wxapp-img

Este é um componente de pré-carregamento de imagem nativo adequado para miniprogramas WeChat ( se você estiver usando Taro, vá para o ramo taro ). Ele tem sido usado em muitos miniprogramas, como JD Shopping. As etapas de uso são as seguintes:

1. Copie o diretório img-loader para o seu projeto

2. Adicione o seguinte código ao arquivo WXML da página para apresentar o modelo de componente

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

3. Introduzir scripts de componentes no arquivo JS da página

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

4. Instancie um objeto ImgLoader e passe-o (objeto Page atual). O segundo parâmetro é opcional e é o método de retorno de chamada padrão para conclusão do carregamento da imagem.

 this . imgLoader = new ImgLoader ( this )

5. Chame o método load da instância ImgLoader para carregar a imagem. O primeiro parâmetro é o link da imagem e o segundo parâmetro é opcional e é o método de retorno de chamada quando a imagem é carregada.

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

Nota: O primeiro parâmetro do método de retorno de chamada após a conclusão do carregamento da imagem é a mensagem de erro (nulo se o carregamento for bem-sucedido) e o segundo parâmetro são as informações da imagem (tipo de objeto, incluindo src, largura e altura).

Para métodos de uso, consulte os exemplos no diretório de demonstração, incluindo cenários de carregamento de uma única imagem e carregamento de várias imagens. O efeito de execução é mostrado na figura abaixo:

-eof-