小程序幻灯片组件swiper使用。

幻灯片实现效果：

小程序组件：swiper

一、在当前页面的初始数据设置轮播图片数组：

  data: {
      banner:[
        '../assets/images/banner1.jpg','../assets/images/banner2.jpg','../assets/images/banner3.jpg'
      ]
  },

使用数组形式设置图片src属性图片地址，使用wx:for循环调用幻灯片图片地址：

<view id='banner'>
    <swiper indicator-dots="{{true}}" indicator-color="#ffffff" autoplay="true" circular="true" >
      <block wx:for="{{banner}}" wx:key="banner">
        <swiper-item>
          <image src='{{item}}'mode="aspectFill" style="width:100%;height:100%;" />
        </swiper-item> 
      </block>
    </swiper>
  </view>

使用<block></block>组件循环出幻灯片图片。 wx:for="{{banner}}" 循环遍历页面初始数据里设置的图片地址数组。

src="{{item}}" 为图片调用地址的当前项目（即循环中的每个当前项目）。

swiper 属性：

indicator-dots

Boolean

false

是否显示面板指示点

indicator-color

Color

rgba(0, 0, 0, .3)

指示点颜色

indicator-active-color

Color

#000000

当前选中的指示点颜色

autoplay

Boolean

false

是否自动切换

swiper-item

仅可放置在<swiper/>组件中，宽高自动设置为100%。