适用于移动端循环播放一组图片或内容。
# 何时使用
import { HiSwipe } from 'hi-kits/swipe'
1
# 基本用法
1
2
3
4
<h-row gutter="10">
<h-col span="6">
<h-swipe>
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy Copy
# 圆形指示器
1
2
3
4
<h-row gutter="10">
<h-col span="6">
<h-swipe type='round'>
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy Copy
# 自动播放
1
2
3
4
<h-row gutter="10">
<h-col span="6">
<h-swipe type='round' autoplay>
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy Copy
# 设置默认选中的 轮播
1
2
3
4
<h-row gutter="10">
<h-col span="6">
<h-swipe type='round' defaultindex="2">
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy Copy
# 设置指示器颜色
1
2
3
4
<h-row gutter="10">
<h-col span="6">
<h-swipe activecolor="red" inactivecolor="#000">
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Expand Copy Copy
# 横向拖拽滑动模式
横向拖拽滑动模式
1
2
3
4
横向拖拽滑动2模式
1
2
3
4
横向拖拽滑动2.5模式
1
2
3
4
横向拖拽滑动3模式
1
2
3
4
<h-row gutter="10">
<h-col span="6">
<p>横向拖拽滑动模式</p>
<h-swipe slide="drag" radius="10">
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
<h-col span="6">
<p>横向拖拽滑动2模式</p>
<h-swipe slide="drag" mode="1/1" gutter="10">
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
<h-col span="6">
<p>横向拖拽滑动2.5模式</p>
<h-swipe slide="drag" mode="1/1/0.5" gutter="10" radius="10">
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
<h-col span="6">
<p>横向拖拽滑动3模式</p>
<h-swipe slide="drag" mode="1/1/1" gutter="10" radius="10">
<h-swipe-item>
<div>1</div>
</h-swipe-item>
<h-swipe-item>
<div>2</div>
</h-swipe-item>
<h-swipe-item>
<div>3</div>
</h-swipe-item>
<h-swipe-item>
<div>4</div>
</h-swipe-item>
</h-swipe>
</h-col>
</h-row>
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
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
Expand Copy Copy