7.1.3 swiper
swiper 滑块视图，比如首页进行滚动展示就需要用到这个组件。
swiper 所包含的属性，如表7-6所示：
表7-6
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 （这个属性目前暂未启用） |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 （这个属性目前暂未启用） |
| autoplay | Boolean | false | 是否自动切换 |
| current | Number | 0 | 当前所在页面的 index |
| interval | Number | 5000 | 自动切换时间间隔 |
| duration | Number | 500 | 滑动动画时长 |
| circular | Boolean | false | 是否采用衔接滑动 |
| bindchange | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current} |
注意：
- 其中只可放置
<swiper-item>组件，否则会导致未定义的行为。<swiper-item>组件仅可放置在<swiper>组件中，宽高自动设置为100%。
示例代码：
wxml中：
<view class="viewTitle">
<text class="titleName">Swiper视图展示</text>
</view>
<view class="page__bd">
<view class="section section_gap swiper">
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}"
duration="{{duration}}">
<block wx:for="{{background}}">
<swiper-item>
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
</view>
wxss中
.swiper-item {
width:200rpx;
/*display:block;
*/
height:300rpx;
}
.bc_green {
background-color:#09BB07;
}
.bc_red{
background-color: #F76260;
}
.bc_blue{
background-color: #10AEFF;
}
.bc_yellow{
background-color: #FFBE00;
}
.bc_gray{
background-color: #C9C9C9;
}
js中：
Page({
data: {
background: ['green', 'red', 'yellow'],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 3000,
duration: 1200
},
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeVertical: function (e) {
this.setData({
vertical: !this.data.vertical
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
}
})
运行结果如图7-3所示：
图7-3 swiper组件演示