效果圖展示：

先了解下swiper組件參數配置

輪播實現的具體步驟如下：

第一步：添加圖片素材，我這邊是放到images下，文件以及圖片名字自定義即可。

第二步：在wxml中進行頁面布局

在這裏呢，用到了列表渲染、 swiper組件，三元運算符（註：由於小程序不能操作dom，三元運算符還有一個常用的使用場景是控件class樣式輸出，達到jQuery.addClass()的效果）

 <view class="swiper-container">
  <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
    <block wx:for="{{slider}}" wx:key="unique">
      <swiper-item>
        <image src="{{item.picUrl}}" class="img" data-index="{{index}}"></image>
      </swiper-item>
    </block>
  </swiper>
  <view class="dots">
    <block wx:for="{{slider}}" wx:key="unique">
      <view class="dot {{index == swiperCurrent ? ‘ active‘ : ‘‘
 
}}"></view>
    </block>
  </view>
</view> 

第三步：在js中創建圖片列表，以便於進入頁面的時候就會渲染圖片。

　　　　　　紅色標註為，swiperChange方法中傳入的參數用於三木運算符控制輪播圖下面的圓點樣式。

/**
   * 頁面的初始數據
   */
  data: {
    slider:[
      {picUrl:‘../images/1.jpg‘},
      { picUrl: ‘../images/2.jpg‘ },
      { picUrl: ‘../images/3.jpg‘ }
    ],
    swiperCurrent:0,
  },
  //輪播 組件控制
  swiperChange:function(e){
    this.setData({
      swiperCurrent
 
:e.detail.current
    })
  },

小程序--swiper輪播圖組件