Une brève analyse de la balise d'image et du composant swiper dans l'apprentissage du mini-programme

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. Balise d'image Balise d'image

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 swiperpeut 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 swiper

swiper就是一个包裹轮播图的容器，里面的子元素必须是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 indicateursindicateur-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!