微信小程序------轮播图

swiper

微信小程序实现轮播图，和网站，APP的效果差不多，代码少，效率高。

先来看看效果图：

image

主要用swiper + swiper-item来实现

<view class='swiper'>滑块视图容器</view>

<!--
   indicator-dots='true' 是否显示指示点  默认 false
   indicator-color:指示点颜色
   indicator-active-color:选中的指示点颜色
   autoplay：是否自动切换  默认：false
   interval:自动切换时间间隔
   duration：滑动动画时长
   vertical  是否改成纵向， 默认  false
 -->

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

</swiper>

一个简单的小案例，轮播图，代码简洁，功能强大。

源码点击下载
https://github.com/DickyQie/wechat-applet-basics/tree/swiper-carousel