初次嘗試微信小程式的簡單製作過程中，必不可缺的便是主頁上的輪播圖，在大多數的頁面上不難見到的第一眼便是輪播圖。本小白在這上面翻閱了許多資料，初步製成一個簡單的輪播圖，下面介紹下製作過程，以便記憶。

說到輪播圖，就必須要了解下swiper（滑塊檢視容器），具體用法微信公眾平臺介紹的很詳細，
網址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
下面是wxml的程式碼

<swiper class="swiper-box" indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
  <navigator url="{{item.link}}" hover-class="navigator-hover">
   <image src="{{item.url}}" width="355" height="150"/>
   </navigator> 
  </swiper-item>
 </block>
</swiper>
 

1. class=“swiper-box”，是連結上wxss裡的程式碼

  .swiper-box{
    width: 100%;
    height: 200px;
    text-align: center;
  }

2. indicator-dots="{{indicatorDots}}“是指js裡在page（{}）中的一行程式碼，表示"是否顯示面板指示點"，下列表示顯示面板指示點

 indicatorDots: true,

3. autoplay="{{autoplay}}"是指js裡在page（{}）中的一行程式碼，表示“是否自動切換”，下列表示自動切換

autoplay: true,

4. interval="{{interval}}"是指js裡在page（{}）中的一行程式碼，表示“自動切換時間間隔”，下列表示自動切換時間間隔3s

 interval: 3000,

5. duration="{{duration}}"是指js裡在page（{}）中的一行程式碼，表示“滑動動畫時長”，下列表示滑動動畫時長0.5s

duration: 500,

• block是包裝元素， “block wx:for="{{imgUrls}}" wx:key=“unique””
  (1)其中的wx:for="{{imgUrls}}"——在元件上使用 wx:for 控制屬性繫結一個數組“imgUrls”，即可使用陣列中各項的資料重複渲染該元件。
  (2)wx:key=“unique”——如果列表中專案的位置會動態改變
  或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態，
  當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。（這個unique沒看懂~有知道的請幫幫忙解釋下，感謝！）
• swiper-item僅可放置在swiper元件中，寬高自動設定為100%。
• navigator頁面連結，
  (1)url="{{item.link}}" 指連結地址，
  (2)item.link是指在js裡的前面說到的陣列“imgUrls”裡的link，
  (3)navigator-hover 預設為 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, navigator的子節點背景色應為透明色。
• “<image src="{{item.url}}“width=“355” height=“150”/>”，src=”{{item.url}}"表示圖源是指陣列“imgUrls”裡的url，width和height表示圖片的寬和高。
  如下js程式碼：

Page({
  data: {
      imgUrls: [        
        {
          link:  '/pages/ywsn/ywsn',      //寫入點選連結後的顯示頁面
          url: '/img/ywsn.png',          //寫入顯示的本地圖片地址
        }, {
          link: '/pages/yscn/yscn',
          url: '/img/cnys.png',
        }, {
          link: '/pages/rgaq/rgaq',
          url: '/img/rgai.png'
        } 
      ],  
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 500,
      }
      })

注：本小白為真小白，不喜請勿吐槽。