小程序提供了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 的属性可见官网，上面已经给了很详细的说明，而这里{{}}里包裹的都是要在根文件(.js)中的data中定义。
而这里的<block>标签是用来组织代码的，wx:for="{{imgUrls}} 相当于绑定了.js文件中的data中imgUrls数组的数据，并直接将数组展开了。
home.js
Page({
data:{
indicatorDots:true, //显示面板指示点
autoplay:true, //自动切换
interval:5000, //自动切换时间间隔
duration:1000, //滑动动画时长
imgUrls:[
'../../images/swiper/image1.png’, // 本地读取图片的方式
'../../images/swiper/image2.png',
'../../images/swiper/image3.png',
'../../images/swiper/image4.png',
],
},
})
不知道为什么，我的swiper出来的时候右边有一片空白，所以我将图片的宽度改为100%。
引入样式也很简单，class就可以为样式命名。
<image src="{{item}}" class="slideImage" />
home.wxss
.slideImage {
width: 100%;
}
但是轮播图的高度却无法设置，无论我怎么设置都不行，不知道为什么。
