swiper
2020-02-11 18:42 更新
基础库 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
});
}
});
以上内容是否对您有帮助:
更多建议: