swiper
滑块视图容器。其中只可放置 swiper-item 组件,否则会导致未定义的行为。
属性说明
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 |
indicator-color | color | #666666 | 否 | 指示点颜色 |
indicator-active-color | color | #333333 | 否 | 当前选中的指示点颜色 |
autoplay | boolean | false | 否 | 是否自动切换 |
current | number | 0 | 否 | 当前所在滑块的 index |
interval | number | 5000 | 否 | 自动切换时间间隔,单位 ms |
duration | number | 500 | 否 | 滑动动画时长,单位 ms |
circular | boolean | false | 否 | 是否采用衔接滑动 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 |
bind:change | eventhandle | 否 | current 改变时会触发 change 事件,event.detail = {current, source} | |
bind:animationfinish | eventhandle | 否 | 动画结束时会触发 animationfinish 事件,event.detail 同上 |
change 事件 source 返回值
change 事件的 source 字段,表示导致变更的原因,可能值如下:
值 | 说明 |
---|---|
autoplay | 自动播放导致 swiper 变化 |
touch | 用户划动引起 swiper 变化 |
空字符串 | 其它原因 |
示例代码
TYML
<view class="container">
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
circular="{{circular}}"
vertical="{{vertical}}"
interval="{{interval}}"
duration="{{duration}}"
>
<block ty:for="{{background}}" ty:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
<view class="tyui-cells tyui-cells_after-title">
<view class="page-cell tyui-cell_switch">
<view class="tyui-cell__bd">指示点</view>
<view class="tyui-cell__ft">
<switch checked="{{indicatorDots}}" bind:change="changeProperty" data-property-name="indicatorDots" />
</view>
</view>
<view class="page-cell tyui-cell_switch">
<view class="tyui-cell__bd">自动播放</view>
<view class="tyui-cell__ft">
<switch checked="{{autoplay}}" bind:change="changeProperty" data-property-name="autoplay" />
</view>
</view>
<view class="page-cell tyui-cell_switch">
<view class="tyui-cell__bd">衔接滑动</view>
<view class="tyui-cell__ft">
<switch checked="{{circular}}" bind:change="changeProperty" data-property-name="circular" />
</view>
</view>
<view class="page-cell tyui-cell_switch">
<view class="tyui-cell__bd">竖向</view>
<view class="tyui-cell__ft">
<switch checked="{{vertical}}" bind:change="changeProperty" data-property-name="vertical" />
</view>
</view>
</view>
</view>
<view class="page-section page-section-spacing">
<view class="page-section-title">
<text>幻灯片切换时长(ms)</text>
<text class="info">{{duration}}</text>
</view>
<slider value="{{duration}}" min="{{500}}" max="{{2000}}" bind:change="changeProperty" data-property-name="duration" />
<view class="page-section-title">
<text>自动播放间隔时长(ms)</text>
<text class="info">{{interval}}</text>
</view>
<slider value="{{interval}}" min="{{2000}}" max="{{10000}}" bind:change="changeProperty" data-property-name="interval" />
</view>
</view>
</view>
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。
JS
Page({
data: {
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,
vertical: false,
autoplay: false,
circular: true,
interval: 2000,
duration: 500,
previousMargin: 0,
nextMargin: 0,
},
change: function (e) {},
changeProperty: function (e) {
var propertyName = e.currentTarget.dataset.propertyName;
var newData = {};
newData[propertyName] = e.detail.value;
this.setData(newData);
},
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,
});
},
});
swiper-item
滑块视图容器子项,仅可放置在 swiper 组件中,宽高自动设置为 100%。
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。