swiper
更新时间：2024-11-13 20:33:52
swiper
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| indicator-dots | boolean | false | 是否显示面板指示点 | |
| indicator-color | string | rgba(0, 0, 0, .3) | 指示点颜色 | |
| indicator-active-color | string | #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 和 rpx 值 | |
| next-margin | string | 0px | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 | |
| bindchange | eventhandle | current 改变时会触发 change 事件，event.detail = {current, source} |
扫码预览
组件示例
html
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
current="{{current}}"
vertical="{{vertical}}"
interval="{{interval}}"
duration="{{duration}}"
circular="{{circular}}"
indicator-color="{{indicatorColor}}"
indicator-active-color="{{indicatorActiveColor}}"
>
<block xhs:for="{{background}}" xhs:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
js
Page({
onShareAppMessage() {
return {
title: 'swiper',
path: 'page/component/pages/swiper/swiper',
};
},
data: {
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,
indicatorColor: 'gray',
indicatorActiveColor: 'yellow',
vertical: false,
autoplay: false,
circular: true,
current: 0,
interval: 2000,
duration: 500,
src: '',
nextMargin: '40rpx',
},
onReady() {
setTimeout(() => {
this.setData({
src: 'https://b.bdstatic.com/searchbox/icms/searchbox/images/demo.webp',
});
this.setData({
height: 180,
});
}, 1000);
},
changeIndicatorDots() {
this.setData({
indicatorDots: !this.data.indicatorDots,
});
},
changeAutoplay() {
this.setData({
autoplay: !this.data.autoplay,
});
},
changeVertical() {
this.setData({
vertical: !this.data.vertical,
});
},
changeCircular() {
this.setData({
circular: !this.data.circular,
});
},
changeCurrent({ detail }) {
this.setData({
current: parseInt(detail.value, 10),
});
},
changeIndicatorColor({ detail }) {
this.setData({
indicatorColor: detail.value,
});
},
changeIndicatorActiveColor({ detail }) {
this.setData({
indicatorActiveColor: detail.value,
});
},
intervalChange(e) {
this.setData({
interval: e.detail.value,
});
},
durationChange(e) {
this.setData({
duration: e.detail.value,
});
},
onChange(e) {
console.log('swiper bindChange', e);
},
});