小程序提供了swiper來供我們使用輪播圖。
效果圖：

圖片.png

首先先看home.wxml：

<swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}"
    interval="{{interval}}"
    duration="{{duration}}"
>
    <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slideImage" />
        </swiper-item>
    </block>
</swiper>

swiper 的屬性可見官網(wǎng)，上面已經(jīng)給了很詳細(xì)的說明，而這里{{}}里包裹的都是要在根文件(.js)中的data中定義。

而這里的<block>標(biāo)簽是用來組織代碼的，wx:for="{{imgUrls}} 相當(dāng)于綁定了.js文件中的data中imgUrls數(shù)組的數(shù)據(jù)，并直接將數(shù)組展開了。

home.js

Page({
  data:{
    indicatorDots:true,  //顯示面板指示點(diǎn)
    autoplay:true,     //自動(dòng)切換
    interval:5000,    //自動(dòng)切換時(shí)間間隔
    duration:1000,    //滑動(dòng)動(dòng)畫時(shí)長
    imgUrls:[
        '../../images/swiper/image1.png’,   // 本地讀取圖片的方式
        '../../images/swiper/image2.png',
        '../../images/swiper/image3.png',
        '../../images/swiper/image4.png',
    ],
  },
})

不知道為什么，我的swiper出來的時(shí)候右邊有一片空白，所以我將圖片的寬度改為100%。

引入樣式也很簡單，class就可以為樣式命名。

<image src="{{item}}" class="slideImage" />

home.wxss

.slideImage {
    width: 100%;
}

但是輪播圖的高度卻無法設(shè)置，無論我怎么設(shè)置都不行，不知道為什么。