小程序-图片轮播（swiper）

基本结构

<swiper >
  <swiper-item><image src="/images/banner_01.png"/></swiper-item>
  <swiper-item><image src="/images/banner_02.png"/></swiper-item>
  <swiper-item><image src="/images/banner_03.png"/></swiper-item>
</swiper>

swiper：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
swiper-item：仅可放置在swiper组件中，宽高自动设置为100%。

轮播常用属性

• indicator-dots：是否显示面板指示点，默认false
• indicator-color：指示点颜色值
• indicator-active-color：当前选中的指示点颜色，默认#000000
• autoplay：是否自动切换，默认为false
• interval：自动切换时间间隔，默认5000
• circular：是否采用衔接滑动，即无限循环，默认为false
• duration：滑动动画时长，默认500
• bindchange：current 改变时会触发 change 事件，event.detail = {current, source}
  https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

使用示例

<swiper class="swiper-container" indicator-dots="true" indicator-color="#ccc"
 indicator-active-color="#fff"autoplay="true" interval="5000"  circular="true" 
duration="1000">
  <swiper-item><image src="/images/banner_01.png"/></swiper-item>
  <swiper-item><image src="/images/banner_02.png"/></swiper-item>
  <swiper-item><image src="/images/banner_03.png"/></swiper-item>
</swiper>

.swiper-container image{
  width: 100%;
  height: 100%;
}

swiper bindchange 的使用

<view>
    <swiper class="swiper-container" indicator-dots="true" indicator-color="#ccc" indicator-active-color="#fff" autoplay="true" interval="5000" circular="true" duration="1000" bindchange="swiperChange">
        <block wx:for="{{bannerList}}" wx:key="key" wx:for-item="item">
            <swiper-item>
                <image src="{{item}}" />
            </swiper-item>
        </block>
    </swiper>
    <text>切换到了第{{pageIndex}}张</text>
</view>

.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pageIndex:0,
    bannerList: [
      "/images/banner_01.png",
      "/images/banner_02.png",
      "/images/banner_03.png"
    ]
  },

  /**
   * current 改变时会触发 change 事件
   * @param {*} e 
   */
  swiperChange(e) {
    this.setData({
      pageIndex: e.detail.current
    })
  },
}