# swiper
滑块视图容器。
一般用于左右滑动或上下滑动，比如 banner 轮播图。
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper 下的每个 swiper-item 是一个滑动切换区域，不能停留在2个滑动区域之间。
# 使用示例
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-title">swiper 滑动视图</view>
<view class="bz-margin-wrap">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item><view class="swiper-item bz-bg-red">A</view></swiper-item>
<swiper-item><view class="swiper-item bz-bg-green">B</view></swiper-item>
<swiper-item><view class="swiper-item bz-bg-blue">C</view></swiper-item>
</swiper>
</view>
<view class="demo-padding-wrap">
<view class="bz-list-cell bz-list-cell-pd">
<view class="bz-list-cell-db">指示点</view>
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
</view>
<view class="bz-list-cell bz-list-cell-pd">
<view class="bz-list-cell-db">自动播放</view>
<switch :checked="autoplay" @change="changeAutoplay" />
</view>
</view>
<view class="demo-padding-wrap">
<view class="bz-common-mt">
<text>幻灯片切换时长(ms)</text>
<text class="info">{{duration}}</text>
</view>
<slider @change="durationChange" :value="duration" min="500" max="2000" />
<view class="bz-common-mt">
<text>自动播放间隔时长(ms)</text>
<text class="info">{{interval}}</text>
</view>
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500
}
},
methods: {
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
}
}
}
</script>
<style>
.demo-ui-page {
padding: 10px 0 30px;
}
.bz-margin-wrap {
width: 100%;
}
.swiper {
height: 300rpx;
}
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
.bz-common-mt {
margin-top: 60rpx;
position: relative;
}
.info {
position: absolute;
right: 20rpx;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示面板指示点 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜色 |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜色 |
| autoplay | Boolean | false | 是否自动切换 |
| current | Number | 0 | 当前所在滑块的 index |
| current-item-id | String | 当前所在滑块的 item-id ，不能与 current 被同时指定 | |
| interval | Number | 5000 | 自动切换时间间隔 |
| duration | Number | 500 | 滑动动画时长 |
| circular | Boolean | false | 是否采用衔接滑动，即播放到末尾后重新回到开头 |
| vertical | Boolean | false | 滑动方向是否为纵向 |
| previous-margin | String | 0px | 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 |
| next-margin | String | 0px | 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 |
| display-multiple-items | Number | 1 | 同时显示的滑块数量 |
| skip-hidden-item-layout | Boolean | false | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 |
| disable-touch | Boolean | false | 是否禁止用户 touch 操作 |
| @change | EventHandle | current 改变时会触发 change 事件，event.detail = {current: current, source: source} | |
| @transition | EventHandle | swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy} | |
| @animationfinish | EventHandle | 动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source} |
change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：
- autoplay 自动播放导致swiper变化。
- touch 用户划动引起swiper变化。
- 其他原因将用空字符串表示。
swiper做左右拖动的长列表的专项问题
- swiper 是单页组件，适合做 banner 图轮播和简单列表左右滑动。
- 因为性能问题，用swiper做复杂长列表，需要较高的优化技巧以及接受一些限制。
Tips
- 使用竖向滚动时，需要给
<scroll-view>一个固定高度，通过 css 设置 height。 - 注意：其中只可放置
<swiper-item>组件，否则会导致未定义的行为。 - banner图的切换效果和指示器的样式，有多种风格可自定义
- 同时监听 change transition，开始滑动时触发transition, 放开手后，在ios平台触发顺序为 transition... change，Android为 transition... change transition...
# easing-function
| 值 | 说明 |
|---|---|
| default | 默认缓动函数 |
| linear | 线性动画 |
| easeInCubic | 缓入动画 |
| easeOutCubic | 缓出动画 |
| easeInOutCubic | 缓入缓出动画 |
# swiper-item
仅可放置在 <swiper> 组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| item-id | String | 该 swiper-item 的标识符 |
← view scroll-view →