前言:
今天打开微信官方文档发现轮播图组件更新了两个功能,但是目前暂未启用,估计过几天就能使用了。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-color | Color | rgba(0,0,0,.3) | 指示点颜色 (这个属性目前暂未启用) |
indicator-active-color | Color | #000000 | 当前选中的指示点颜色 (这个属性目前暂未启用) |
最终的效果图:
代码部分:
下面我们来继续研究代码部分:
wxml部分:
<view>
<swiper indicator-dots="true" autoplay="true" interval="2000">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
</view>
注意:swiper-item仅可放置在swiper组件中,宽高自动设置为100%。
js部分:
data:{
imgUrls: [
'/images/wx.png',
'/images/vr.png',
'/images/iqiyi.png'
]
},
js文件中定义了一个数组,里面存放图片的路径
wxss代码:
swiper,swiper image {
width: 100%;
height: 500rpx;
}
注意:轮播图组件的宽高样式需要设置在swiper标签上,官方文档中没有说明,只能一个一个试,最后的结论是必须定义在swiper标签。