Cet article vous guidera à travers le composant de balise d'image et de carrousel de swiper dans le mini-programme. J'espère qu'il vous sera utile !
1 src
src spécifie le chemin de l'image à charger
(1) L'image a une largeur et une hauteur par défaut de 320 * 240 . La taille de l'image originale est de 100. Remplissez l'élément d'image
(2) aspectFit conserve le rapport hauteur/largeur pour garantir que le côté long de l'image est affiché. Couramment utilisé dans les images de carrousel de page (3) aspectFill maintient le rapport hauteur/largeur. redimensionner l'image et garantit uniquement que le côté court de l'image peut être entièrement affiché. Utilisez moins (4) widthFix Pour les images du Web précédent, une fois la largeur spécifiée, la hauteur sera ajustée proportionnellement. . Semblable à la position de fond précédente
[Recommandations d'apprentissage associées :
Tutoriel de développement de mini-programmes]
3 lazy-load
Les images du mini-programme prennent directement en charge le lazy-loadlazy-load It jugera par lui-même quand l'image apparaît dans la hauteur des trois écrans au-dessus et en dessous de la fenêtre I et commencera à charger l'image
2 Le composant carrousel swiper peut automatiquement carrouseler les sous-éléments et est né avec des points indicateurs. , vous pouvez également faire glisser votre doigt vers la gauche ou la droite.
1 swiper Carrousel graphique conteneur extérieur swiperswiper
就是一个包裹轮播图的容器,里面的子元素必须是swiper-item
组件。swiper
2 swiper-itemChaque article du carrousel swiper-item
3 swiper label a un style par défaut (1 )largeur 100%
(2)hauteur 150pxl'image a une largeur et une hauteur par défaut de 320
240(3)*la hauteur du curseur ne peut pas être étendue par le contenu
4 Découvrez d'abord la largeur et la hauteur du image originale Définissez la largeur et la hauteur du swiper proportionnellement à la hauteur. La largeur et la hauteur de l'image originale sont de 1125 * 352 px. Hauteur/largeur de l'image originale
hauteur : 10ovw * 352 /1125
. 5 autoplay
autoplay carrousel automatique
6 intervalles
intervalle pour modifier le temps du carrousel
7 circulairecarrousel de connexion circulaire
8 points indicateurs indicateur-points affichage indicateur paginateur indexeur
9 indicateur-couleurindicateur-couleur indicateur de couleur sélectionnée
10 indicateur-active-colorindicator-active-color La couleur de l'indicateur une fois sélectionné
Pour plus de connaissances sur la programmation, veuillez visiter :
Introduction à la programmation! !
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!