Introduction à l'utilisation du composant de préchargement d'image wxapp-img-loader dans l'applet WeChat

不言
Libérer: 2018-10-18 15:22:32
avant
5740 Les gens l'ont consulté

Cet article vous présente une introduction à l'utilisation du composant de préchargement d'image wxapp-img-loader dans l'applet WeChat. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

Étant donné que l'applet WeChat ne fournit pas d'objets JS comme Image, il est plus difficile de précharger les images. Le composant personnalisé wxapp-img-loader peut implémenter le préchargement d'image dans la fonction de l'applet WeChat.

Utilisez

1. Téléchargez le code source du projet wxapp-img-loader (https://github.com/o2team/wxa...) et modifiez-le. img- Copiez le répertoire du chargeur dans votre projet

2. Ajoutez le code suivant au fichier WXML de la page pour introduire le modèle de composant

<import></import>
<template></template>
Copier après la connexion

3. Fichier JS de la page

const ImgLoader = require('../../img-loader/img-loader.js')
Copier après la connexion

4. Instanciez un objet ImgLoader et transmettez-le (objet Page actuel). Le deuxième paramètre est facultatif et est la méthode de rappel par défaut pour terminer le chargement de l'image

this.imgLoader = new ImgLoader(this)
Copier après la connexion
5. Appelez la méthode de chargement de l'instance ImgLoader pour charger l'image. Le premier paramètre est le lien de l'image, et le deuxième paramètre est facultatif et est la méthode de rappel lorsque l'image est chargée. Le premier paramètre de la méthode de rappel lorsque le chargement de l'image est terminé est le message d'erreur (nul si le chargement est réussi), et le deuxième paramètre est les informations sur l'image (type d'objet, y compris src, largeur et hauteur).

this.imgLoader.load(imgUrlOriginal, (err, data) => {    console.log('图片加载完成', err, data.src, data.width, data.height)
})
Copier après la connexion
Le composant wxapp-img-loader peut charger une seule image ou plusieurs images.

Effet opérationnel :


Introduction à lutilisation du composant de préchargement dimage wxapp-img-loader dans lapplet WeChat

Introduction à lutilisation du composant de préchargement dimage wxapp-img-loader dans lapplet WeChat

Autres

Adresse du projet wxapp-img-loader : https://github.com/o2team/wxa...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!