swiper

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

效果展示

示例代码

WXML

<view class="page">
<view class="page__hd">
<text class="page__title">swiper</text>
<text class="page__desc">swiper</text>
</view>
<view class="page__bd">
<view class="section section_gap swiper">
<view>{{res}}</view>
<swiper indicator-dots="{{indicatorDots}}" indicator-active-color="{{indicatorActiveColor}}" indicator-color="{{indicatorColor}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
previous-margin="40px" next-margin="40px" bindchange="onChange">
<block wx:for-items="{{background}}">
<swiper-item previous-margin="0" next-margin="40px">
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="btn-area">
<button type="default" bindtap="changeIndicatorDots">indicator-dots</button>
<button type="default" bindtap="changeVertical">{{vertical?'horizontal':'vertical'}}</button>
<button type="default" bindtap="changeAutoplay">autoplay</button>
</view>
<slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000"/>
<view class="section__title">duration</view>
<slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
<view class="section__title">interval</view>
</view>

<swiper easing-function="linear" indicator-color="#000" indicator-active-color="#fff" interval="1000" duration="1000" circular autoplay indicator-dots current="2">
<block wx:for-items="{{background}}">
<swiper-item>
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>

JS

Page({
data: {
background: ['green', 'red', 'yellow', 'red'],
indicatorDots: true,
indicatorColor:"#ffffff",
indicatorActiveColor:"#000000",
previousMargin:"30px",
nextMargin:"30px",
vertical: false,
autoplay: false,
interval: 3000,
duration: 1000,
res: 'res'
},
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
})
},
onChange(e) {
this.setData({
res: JSON.stringify(e.detail)
})
console.log(e.detail)
}
})

WXSS

.swiper-item{
display: block;
height: 150px;
}
.bc_green{ background: green;}
.bc_red{ background: red;}
.bc_yellow{ background: yellow;}

API

属性 类型 默认值 必填 说明
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 是否采用衔接滑动
vertical boolean false 滑动方向是否为纵向
previous-margin string “0px” 前边距,可用于露出前一项的一小部分,接受 px
next-margin string “0px” 后边距,可用于露出后一项的一小部分,接受 px
bindchange eventhandle current 改变时会触发 change 事件,event.detail = {current}
  • previous-margin、next-margin需配合swiper-item使用,设置在swiper-item上生效
  • current改变时会切换至所在滑块。若两次设置相同的current,则不会产生切换

多平台支持

属性 平台支持
indicator-dots 支付宝
indicator-color 支付宝
indicator-active-color 支付宝
autoplay 支付宝
current 支付宝
interval 支付宝
duration 支付宝
circular 支付宝
vertical 支付宝
previous-margin 支付宝
next-margin 支付宝
bindchange 支付宝

注释:

支付宝对于previous-margin next-margin属性在swiper-item不生效,但在swiper组件属性生效(微信对于previous-margin next-margin属性在swiper-item生效,但在swiper组件属性不生效)