微信小程序之輪播圖

今天記錄一下微信小程序開發時，輪播圖的效果時怎麼實現的。話不多說，直接上代碼：

<!-- 1. 首頁輪播圖 -->
  <view>
    <swiper class="my-swiper" 
              autoplay="true" 
              indicator-dots="true" 
              indicator-active-color="#fff"
              circular="true">
        <block wx:for="{{imgUrls}}">
          <swiper-item class="sw-img">
              <image src="{{item}}" mode="widthFix"></image>
          </swiper-item>
        </block>
      </swiper>
  </view>

輪播，就用swiper組件，裏面有很多屬性，一般以下幾個比較常用：

• autoplay="true"：設置自動播放
• indicator-dots="true"： 是否顯示面板指示點
• indicator-active-color="#fff"： 當前選中的指示點顏色
• circular="true"： 是否採用銜接滑動
• interval： 自動切換時間間隔，默認5000ms

js裏面的數據：

Page({
  data: {
    imgUrls: ["https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/3c5e6138079dc63ebe3688afff0a63b0fb56fbe1702bb754e33c4ca874b872ced8df2f995cd0d7ae9ce9db487f8f90a7?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=Natural.png&size=750",
  "https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/4e5e95cc21cb5e2b2f5ecfdc0f7406dbc731207642cda81a9b880c79c4ee624fc37b5d4548d8cad8f7c2ec585bef9c85?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=DSC_0026.JPG&size=750",
  'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/6283d77c69833853929662a4e86f089ec4570433af79a4ab614dd90d05f2cd6c5ab142f2df15172714a76bdced89d82f?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=DSC_0061.JPG&size=750',
  'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/55d0ac2a67bb6d57a343a61070ea23de0457a536ebe9415e1b39ec8c3c6b3fe343b70f1a1a1c211d3c04e97d5d1c30be?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=DSC_0059.JPG&size=750',
  'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/0d2bf2e9fdd34a7167b65750b3d808acda73ff0541f78d288bd636a723bf51bdbe191aa297de4d1bd72a427bb9ca6f41?pictype=scale&from=30013&version=3.3.3.3&uin=522083376&fname=DSC_0058.JPG&size=750'
    ]
  }，