Résumer la solution au problème de hauteur du carrousel de swiper dans l'applet de partage

La balise swiper dans le mini programme aura sa propre hauteur fixe de 150 px, mais nous espérons en fait que la hauteur de ce carrousel pourra être modifiée de manière dynamique, sinon elle aura toujours une hauteur de 150 px sur différents appareils, et il y aura du style. problèmes. Cet article vous présentera la solution à ce problème de hauteur, j’espère qu’il vous sera utile !

1. Présentation

L'applet définit une hauteur fixe de 150px pour l'étiquette du carrousel. Ce style n'a pas l'air très évident sur un appareil grand écran, mais s'il est remplacé par un iphone5. sur un si petit modèle d'écran, la hauteur de l'image n'atteindra pas 150px. Parce que le mode que j'ai défini pour l'image est widthFix, la hauteur de l'image s'adapte en fonction de la largeur. Le problème à résoudre est donc de faire varier la hauteur du carrousel en fonction de la hauteur de l’image.

2. Résolvez

1) Définissez un style en ligne pour le swiper, liez la hauteur aux données dynamiques et définissez un id="swiper-image" pour la balise d'image interne et la balise d'image ; est un événement : bindload. Cet événement est déclenché lorsque l'image est chargée, et cet événement est lié à l'image. Documentation officielle du site : https://developers.weixin.qq.com/miniprogram/dev/component /image.html.

Remarque : Pourquoi n'obtiens-je pas la hauteur de l'image dans le cycle de vie onLoad ? En effet, si vous utilisez certaines méthodes dans onLoad pour obtenir les informations sur l'image, vous ne pouvez les obtenir qu'à partir de l'image locale. Informations précises, mais pour les images demandées sur Internet, l'image peut ne pas être demandée après le chargement du composant, donc les données spécifiques ne peuvent pas être obtenues, utilisez donc l'événement bindload fourni avec l'image pour obtenir ses informations spécifiques

2), déclarez une variable swiperHeight dans les données du fichier index.js pour stocker la hauteur de l'étiquette du swiper

3), puis écrivez la fonction de gestionnaire d'événements bindload handleSwiperImageLoaded liée à l'image, en utilisant la petite méthode
du programme obtient les informations spécifiques de l'image. Enfin, définissez la couverture de l'image obtenue sur swiperHeight, de sorte qu'elle soit liée dynamiquement à la balise swiper, et l'affichage du style de page sera normal

wx.createSelectorQuery()，创建节点选择器后，调用 query.select('#swiper-image').boundingClientRect().exec((res) => {})

3. ) . Ici, comme il y a plus d'une douzaine d'images dans ma requête, cette méthode sera appelée plus de dix fois, il me suffit donc d'écrire une fonction anti-tremblement pour résoudre ce problème. Je crée un nouveau fichier hook.js dans le répertoire jusqu'à.js sous le répertoire racine pour stocker ma fonction js encapsulée. J'y écris la fonction anti-shake et je l'exporte

2), dans home-index. .js dans le répertoire musical introduit la fonction anti-shake encapsulée

3), utilisez simplement la fonction anti-shake dans la méthode handleSwiperImageLoaded. Cette méthode ne sera déclenchée qu'après le chargement de la dernière image

.

【Recommandations d'apprentissage associées :

Tutoriel de développement de mini-programmes

】

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!