Maison Code source du site Web Code source du mini-programme Composant de préchargement d'image pour l'applet WeChat

Composant de préchargement d'image pour l'applet WeChat

Le composant de préchargement d'image adapté aux mini-programmes WeChat a été appliqué à la crackée du mini-programme JD shopping. Les étapes d'utilisation sont les suivantes :

1. Copiez le répertoire img-loader dans votre projet

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

<import src="../../img-loader/img-loader.wxml"/>
<template is="img-loader" data="{{ imgLoadList }}"></template>
3. Introduisez les scripts des composants dans le fichier JS de la page

const ImgLoader = require('../../img-loader/img-loader.js')
4. Instanciez un objet ImgLoader et transmettez-le (objet Page actuel). Le deuxième paramètre est facultatif et constitue la méthode de rappel par défaut pour terminer le chargement de l'image
.
this.imgLoader = nouveau ImgLoader(this)
5. Appelez la méthode de chargement de l'instance ImgLoader pour charger l'image. Le deuxième paramètre est facultatif et est la méthode de rappel lorsque l'image est chargée
.
this.imgLoader.load(imgUrlOriginal, (err, data) => {
console.log('Chargement de l'image terminé', err, data.src, data.width, data.height)
})
Remarque : 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).
Clause de non-responsabilité

Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn

Article connexe

Partagez l'adresse de téléchargement de l'applet WeChat et un tutoriel de crack pour le développement de l'applet WeChat Partagez l'adresse de téléchargement de l'applet WeChat et un tutoriel de crack pour le développement de l'applet WeChat

10 Mar 2017

Ce document vous guidera étape par étape pour créer une applet WeChat, et vous pourrez découvrir l'effet réel de l'applet sur votre téléphone mobile. La page d'accueil de ce mini programme affichera le message de bienvenue et l'avatar WeChat de l'utilisateur actuel. Cliquez sur l'avatar pour afficher le journal de démarrage du mini programme actuel dans la page nouvellement ouverte.

Utilisez l'applet WeChat pour implémenter une barre de progression circulaire Utilisez l'applet WeChat pour implémenter une barre de progression circulaire

27 Feb 2017

À mesure que la popularité des mini-programmes diminue, de plus en plus de gens ont commencé à se calmer et à développer des mini-programmes WeChat. Récemment, j'ai rencontré un problème lors du développement d'un mini-programme WeChat : comment utiliser les mini-programmes WeChat pour obtenir une bande de progression circulaire ? Après l'avoir trié, enregistrez-le et partagez-le avec tout le monde.

Explication détaillée de l'exemple de composant d'image de l'applet WeChat Explication détaillée de l'exemple de composant d'image de l'applet WeChat

20 Feb 2017

Cet article présente principalement les informations pertinentes sur l'explication détaillée de l'exemple de composant Image de l'applet WeChat. Les amis dans le besoin peuvent s'y référer.

Solution de bordure d'image pour l'applet WeChat Solution de bordure d'image pour l'applet WeChat

20 Jan 2017

Cet article présente principalement les informations pertinentes sur la solution de bordure d'image de l'applet WeChat. Les amis dans le besoin peuvent s'y référer.

Mini programme WeChat facile à utiliser pour utiliser le swiper pour obtenir un effet de rotation d'image Mini programme WeChat facile à utiliser pour utiliser le swiper pour obtenir un effet de rotation d'image

28 Feb 2017

Dans l'article précédent, nous avons configuré le wxss du mini programme pour obtenir une disposition horizontale et verticale dans la vue des composants du conteneur. Dans cet article, nous utilisons la balise swiper pour obtenir l'effet de rotation de l'image. L'effet de rotation peut être observé sur de nombreuses pages d'accueil de sites Web ou applications mobiles. Le composant swiper est utilisé dans l'applet WeChat pour implémenter la rotation d'image. L'effet du petit exemple d'aujourd'hui est le suivant :

MaterialDesign - composant d'entrée de l'applet WeChat MaterialDesign - composant d'entrée de l'applet WeChat

20 Feb 2017

Cet effet est principalement obtenu grâce aux événements d'entrée et aux changements dynamiques de la transformation CSS. Pendant le processus de débogage réel, l'objet détail rappelé après le déclenchement de l'événement bindinput du composant d'entrée contient l'attribut curseur dans le simulateur, mais n'a pas cet attribut dans l'appareil réel (testé sur Android, mais pas sur iOS). Enfin, sélectionnez la valeur dans l'objet de détail. La longueur de la valeur de l'attribut est synchronisée avec le nombre de chiffres saisis.

Problème de swiper d'image de carrousel dans l'applet WeChat Problème de swiper d'image de carrousel dans l'applet WeChat

19 May 2018

Après avoir appelé le swiper d'image du carrousel de l'applet WeChat, comment couvrir les points du système pour obtenir l'effet souhaité ?

Introduction détaillée du composant d'entrée de l'applet WeChat Introduction détaillée du composant d'entrée de l'applet WeChat

29 Dec 2016

Cet article présente principalement des informations pertinentes sur l'introduction détaillée du composant d'entrée de l'applet WeChat. Les amis dans le besoin peuvent s'y référer.

Introduction détaillée du composant texte de l'applet WeChat Introduction détaillée du composant texte de l'applet WeChat

17 Feb 2017

Cet article présente principalement des informations pertinentes sur l'introduction détaillée du composant texte de l'applet WeChat. Les amis dans le besoin peuvent s'y référer.

See all articles See all articles

Hot Tools

Démo du mini programme WeChat : imitation d'un centre commercial

Démo du mini programme WeChat : imitation d'un centre commercial

Démo du mini programme WeChat : imitation d'un centre commercial, facile à démarrer et bonne introduction à certaines fonctions de base du centre commercial

À retenir : implémenter une fonctionnalité de type ancre

À retenir : implémenter une fonctionnalité de type ancre

C'est la fonction d'ancrage similaire dont tout le monde a besoin. De plus, elle implémente également les fonctions de commande typiques de certaines applications à emporter. Il est recommandé d'étudier et d'étudier ;

Démo du mini programme WeChat : Lezhu

Démo du mini programme WeChat : Lezhu

Démo du mini programme WeChat : Lezhu : similaire à une application utile basée sur la localisation, quelque peu similaire à l'esprit du mini programme de Zhang Xiaolong.

La démo du mini-jeu du programme WeChat sélectionne différents blocs de couleurs

La démo du mini-jeu du programme WeChat sélectionne différents blocs de couleurs

La démo du mini-jeu du programme WeChat sélectionne différents blocs de couleurs

Démo de l'applet WeChat : transformation d'image en carrousel

Démo de l'applet WeChat : transformation d'image en carrousel

Changement de style de graphique carrousel, un graphique carrousel simple implémenté avec un petit programme, facile à écrire