Maison >Applet WeChat >Développement de mini-programmes >Partage d'exemples d'applets WeChat complétant l'effet carrousel

Partage d'exemples d'applets WeChat complétant l'effet carrousel

黄舟
黄舟original
2017-09-12 09:19:062961parcourir

Cet article présente principalement l'applet WeChat pour réaliser l'effet carrousel en détail, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à

L'applet WeChat pour réaliser l'effet carrousel. sites Web et applications, avec moins de code et une grande efficacité.

Jetons d'abord un coup d'oeil aux rendus :

Utilisons principalement swiper + swiper-item pour réaliser


 <view class=&#39;swiper&#39;>滑块视图容器</view>
<!--
 indicator-dots=&#39;true&#39; 是否显示指示点 默认 false
 indicator-color:指示点颜色
 indicator-active-color:选中的指示点颜色
 autoplay:是否自动切换 默认:false
 interval:自动切换时间间隔
 duration:滑动动画时长
 vertical 是否改成纵向, 默认 false
 -->

<swiper indicator-dots=&#39;true&#39; indicator-color=&#39;gray&#39; indicator-active-color=&#39;green&#39; autoplay=&#39;true&#39; interval=&#39;5000&#39; duration=&#39;500&#39;>
 <block wx:for="{{imgUrl}}">
  <swiper-item class="item_image">
   <image src=&#39;{{item}}&#39; class=&#39;swiper_image&#39; mode="aspectFill"></image>
  </swiper-item>
 </block>

</swiper>

Un petit boîtier simple, un graphique carrousel, un code concis et des fonctions puissantes.

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!

Déclaration:
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