swiper
Swiper view container.
| Attribute Name | Type | Default | Description | Minimum Version |
| indicator-dots | Boolean | false | show indicator or not | |
| indicator-color | Color | rgba(0, 0, 0, .3) | indicator color | |
| indicator-active-color | Color | #000 | color of currently selected indicator | |
| autoplay | Boolean | false | auto switch or not | |
| current | Number | 0 | current page index | |
| duration | Number | 500(ms) | swipe animation duration | |
| interval | Number | 5000(ms) | auto switch interval | |
| circular | Boolean | false | enable infinite swipe or not | |
| vertical | Boolean | false | is swipe direction vertical or not | |
| onChange | EventHandle | No | trigger on current change, event.detail = {current, current} |
Swiper-item
Can place in component or not; width and height are automatically set as 100%.
Sceenshot
Sample Code
copy
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
>
<block a:for="{{background}}">
<swiper-item>
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</block>
</swiper>
<view class="btn-area">
<button class="btn-area-button" type="default" onTap="changeIndicatorDots">indicator-dots</button>
<button class="btn-area-button" type="default" onTap="changeAutoplay">autoplay</button>
</view>
<slider onChange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
<view class="section__title">interval</view>copy
Page({
data: {
background: ['green', 'red', 'yellow'],
indicatorDots: true,
autoplay: false,
interval: 3000,
},
changeIndicatorDots(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange(e) {
this.setData({
interval: e.detail.value
})
},
})