swiper
Swiper view container
Scan QR code to try:
Property | Type | Default | Description |
| 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
})
},
})