May 18, 2021 WeChat Mini Program Development Document
Base library 1.0.0 starts to support, and low versions need to be compatible.
Slider view container.
| Property | Type | The default | Required | Description | The lowest version |
|---|---|---|---|---|---|
| indicator-dots | boolean | false | Whether | Whether to display the panel indication point | 1.0.0 |
| indicator-color | color | rgba(0, 0, 0, .3) | Whether | Indicates the color of the point | 1.1.0 |
| indicator-active-color | color | #000000 | Whether | The color of the indicator point that is currently selected | 1.1.0 |
| autoplay | boolean | false | Whether | Whether to switch automatically | 1.0.0 |
| current | number | 0 | Whether | Index of the current slider | 1.0.0 |
| interval | number | 5000 | Whether | Switch intervals automatically | 1.0.0 |
| duration | number | 500 | Whether | The length of the slide animation | 1.0.0 |
| circular | boolean | false | Whether | Whether to use a bridging slide | 1.0.0 |
| vertical | boolean | false | Whether | Whether the sliding direction is portrait | 1.0.0 |
| previous-margin | string | "0px" | Whether | The front margin, which can be used to expose a small portion of the previous item, accepts px and rpx values | 1.9.0 |
| next-margin | string | "0px" | Whether | The rear margin, which can be used to expose a small portion of the last, accepts px and rpx values | 1.9.0 |
| display-multiple-items | number | 1 | Whether | The number of sliders displayed at the same time | 1.9.0 |
| skip-hidden-item-layout | boolean | false | Whether | Whether to skip the unseeded slider layout and set it to true optimizes sliding performance in complex situations, but loses layout information for hidden slider | 1.9.0 |
| easing-function | string | "default" | Whether | Specify the type of swiper toggle easing animation | 2.6.5 |
| bindchange | eventhandle | Whether | Change event is triggered when the current changes, event.detail . | 1.0.0 | |
| bindtransition | eventhandle | Whether | The transition event is triggered when the position of swiper-item changes, event.detail . | 2.4.3 | |
| bindanimationfinish | eventhandle | Whether | The animation ends with an animationfinish event, event.detail i.m | 1.9.0 |
The legal value of easing-function
| Value | Description | The lowest version |
|---|---|---|
| default | The default easing function | |
| linear | Linear animation | |
| easeInCubic | Slow down the animation | |
| easeOutCubic | Slow out the animation | |
| easeInOutCubic | Slow in and slow out the animation |
Starting with the public library v1.4.0,
change
detail
that
source
the cause of the change, possibly with the following values:
autoplay
causes the swiftr to change;
touch
user scratching causes a change in the wipper;
Note:
If you use
setData
to change the current value in the event callback function of
bindchange
it is possible
setData
is called non-stop, so
current
source field before changing
source
to determine if it is caused by the user's touch.
current
Base library 1.0.0 starts to support, and low versions need to be compatible.
Can only be
<swiper/>
and the width and height are automatically set to 100%.
| Property | Type | The default | Required | Description | The lowest version |
|---|---|---|---|---|---|
| item-id | string | Whether | The identifier of the swiper-item | 1.9.0 |
Example code:
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
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
})
}
})