微信小程序之 Swiper（轮播图）

1.逻辑层

mine.js

// pages/mine/mine.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    /*轮播图 配置*/
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true, // 是否显示面板指示点
    autoplay: true, // 是否自动切换
    interval: 5000, // 自动切换时间间隔
    duration: 500, // 滑动动画时长
    circular: true, // 是否采用衔接滑动
    /*自定义轮播图 配置*/
    slider: [
      { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },
      { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' },
      { id: '0', linkUrl: 'pages/index/index', picUrl: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' }
    ],
    swiperCurrent: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  //轮播图的切换事件
  swiperChange: function (e) {
    //只要把切换后当前的index传给<swiper>组件的current属性即可
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  //点击指示点切换
  chuangEvent: function (e) {
    this.setData({
      swiperCurrent: e.currentTarget.id
    })
  }
})

2.页面布局

mine.wxml

<!--pages/mine/mine.wxml-->
<view>
  <!-- 轮播图 -->
  <swiper class="swiper" indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
    <block wx:for="{{imgUrls}}" wx:key="id">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>
  <!-- 自定义轮播图 -->
  <view class="swiper-container">
    <swiper circular="true" autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
      <block wx:for="{{slider}}" wx:key="unique">
        <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}">
          <image src="{{item.picUrl}}" class="img"></image>
        </swiper-item>
      </block>
    </swiper>
    <view class="dots">
      <block wx:for="{{slider}}" wx:key="unique">
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>
      </block>
    </view>
  </view>
</view>

3.样式

mine.wxss

/* pages/mine/mine.wxss */
/**轮播图 start**/
.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper image {
  height: 100%;
  width: 100%;
}
/**轮播图 end**/
/**自定义轮播图 start**/
.swiper-container{
  position: relative;
}
.swiper-container .swiper{
  height: 400rpx;
}
.swiper-container .swiper .img{
  width: 100%;
  height: 100%;
}
.swiper-container .dots{
  position: absolute;
  right: 40rpx;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}
.swiper-container .dots .dot{
  margin: 0 10rpx;
  width: 28rpx;
  height: 28rpx;
  background: #fff;
  border-radius: 50%;
  transition: all .6s;
  font: 300 18rpx/28rpx "microsoft yahei";
  text-align: center;
}
.swiper-container .dots .dot.active{
  background: #f80;
  color:#fff;
}
/**自定义轮播图 end**/

4.效果图

5.参数