Maison > Applet WeChat > Développement de mini-programmes > Développer des graphiques de carrousel d'applets WeChat à partir de zéro (5)

Développer des graphiques de carrousel d'applets WeChat à partir de zéro (5)

小云云
Libérer: 2018-03-21 09:52:24
original
2628 Les gens l'ont consulté

Swiper est un plug-in d'effets spéciaux coulissants pour téléphones mobiles, tablettes et autres terminaux mobiles. Il peut réaliser des effets courants tels que l'image de mise au point de l'écran tactile, la commutation d'onglets sur l'écran tactile, la commutation multi-images sur l'écran tactile, etc. Il s’agit actuellement du plug-in coulissant de contenu tactile le plus utilisé pour les pages Web mobiles.

Exemple :


Pour plus de styles, vous pouvez consulter l'API officielle
Lien de référence : https : / /mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

Étape 1 : fichier WXML :

<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
   <image src="{{item}}" class="slide-image"/>
  </swiper-item>
 </block></swiper>
Copier après la connexion

Étape 2 : js fichier :

Page({  data: {
    imgUrls: [      &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,      &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,      &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
 
  },
})
Copier après la connexion

Introduire la signification des paramètres :

   indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
Copier après la connexion

indicateur-points Booléen faux Oui

S'il faut afficher les points indicateurs du panneau
lecture automatique Booléen false S'il faut basculer automatiquement
intervalle Nombre 5000 Intervalle de temps de commutation automatique
durée Nombre 500 Durée de l'animation coulissante

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:
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