微信小程序：視圖容器swiper實現輪播圖

前言

在平時開發中，PC端要想實現輪播圖效果，大都是前端使用js或者其他的js庫來實現。最近在研究微信小程序，發現小程序的輪播圖實現很容易。基本上只用提供數據，其餘的都是通過標籤的屬性來指定，就能實現基本的輪播效果。

編碼實戰

要想開發微笑小程序，是需要在官網進行註冊的，然後使用微信提供的開發工具。這裏，博主就不做介紹了。

一切準備就緒，只需要創建項目，寫代碼就好了，這些基本的東西，如果是剛上手的讀者，請自行查閱相關資料。博文主要講視圖容器"swiper"的使用。
首先將要展示的輪播圖的素材，放入文件夾中，然後在js中封裝成數組。
部分代碼：

  data: {
    images: [
      '../../images/1.jpg',
      '../../images/2.jpg',
      '../../images/3.jpeg',
      '../../images/4.jpg'
    ]
  },

只要自己寫一個數組，來裝圖片的地址即可。
下面就需要完成頁面。

<!--  display-multiple-items="2"每次顯示兩張圖片 -->
<swiper class="swiper" autoplay="true" interval="2500" duration="500" indicator-dots="true" indicator-active-color="#fff" circular="true">
  <block wx:for="{{images}}" wx:for-item="item" wx:for-index="index" wx:key="key">
    <swiper-item>
      <image src="{{item}}" class="img-item"></image>
    </swiper-item>
  </block>
</swiper>

基本這樣，就完成了輪播圖的效果圖，但是爲了使頁面更加好看，還是要添加css,進行修飾的。

.swiper{
  height: 360rpx;
}
.img-item{
  width: 100%;
  height: 100%;
}

正如下面gif圖所示，簡單的代碼就實現了輪播圖效果。

上面標籤的屬性都能在“微信小程序”的開發文檔中進行查看。
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

無論你在哪裏，我一定拼盡全力去見你。