微信小程序（二） 轮播图

小程序提供了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%;
}

但是轮播图的高度却无法设置，无论我怎么设置都不行，不知道为什么。