阅读(2884)
赞(11)
swiper
2020-02-11 17:45:41 更新
基础库 1.0.0 开始支持本组件。
滑块视图容器，其中只可放置 swiper-item 组件，否则会导致未定义的行为。
属性说明
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
| indicator-color | string | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.0.0 |
| indicator-active-color | string | rgba(0, 0, 0, 0) | 否 | 当前选中的指示点颜色 | 1.0.0 |
| autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
| current | number | 0 | 否 | 当前选中滑块的 index | 1.0.0 |
| current-item-id | string | "" | 否 | 当前选中滑块的组件 id，不能与 current 属性同时指定 | 1.0.0 |
| interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 |
| previous-margin | string | "" | 否 | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 | 1.0.0 |
| next-margin | string | "" | 否 | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | 1.0.0 |
| display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.0.0 |
| duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 |
| circular | boolean | false | 否 | 是否循环播放（首尾衔接） | 1.0.0 |
| vertical | boolean | false | 否 | 滑块放置方向是否为竖直 | 1.0.0 |
| bindchange | eventhandle | 否 | current 改变时会触发 change 事件，event.detail = {current, source} | 1.0.0 | |
| bindanimationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件，event.detail = {dx, dy} | 1.0.0 | |
| bindtransition | eventhandle | 否 | swiper-item 产生位移时触发 transition 事件，event.detail = {dx, dy} | 1.20.0 |
change 事件的 source 字段表示导致改变的原因，有如下值：
- autoplay：自动播放导致 swiper 变化
- touch： 用户划动导致 swiper 变化
- 空字符串：其他原因
效果示例
代码示例
<view class="page-section">
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
>
<block tt:for="{{background}}">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="page-section">
<view class="ttui-cells">
<view class="ttui-cell">
<view class="ttui-cell__bd">指示点</view>
<view class="ttui-cell__ft">
<switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
</view>
</view>
<view class="ttui-cell">
<view class="ttui-cell__bd">自动播放</view>
<view class="ttui-cell__ft">
<switch checked="{{autoplay}}" bindchange="changeAutoplay" />
</view>
</view>
</view>
</view>Page({
data: {
background: ["demo-text-1", "demo-text-2", "demo-text-3"],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500
},
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
});
}
});