# 6.3 轮播图（Swiper）
# dof-swiper
轮播图组件
# 实例
# 基础用法
<template>
<div class="wrapper">
<dof-minibar title="Swiper" background-color="#00A4F2" text-color="#ffffff" :left-button="leftButton"></dof-minibar>
<scroller>
<dof-catalog title="有圆点 小banner" background-color="#daf9ca" :has-margin="true"></dof-catalog>
<dof-swiper :slider-style="{ height: '180px' }" img-height="180px" :items="items0" class="mar_top"> </dof-swiper>
<div class="div_sty"></div>
<dof-catalog title="有圆点 常用banner高度1" background-color="#daf9ca" :has-margin="true"></dof-catalog>
<dof-swiper :slider-style="{ height: '280px' }" img-height="280px" :items="items1" class="mar_top"> </dof-swiper>
<div class="div_sty"></div>
<dof-catalog title="有圆点 常用banner高度2" background-color="#daf9ca" :has-margin="true"></dof-catalog>
<dof-swiper :slider-style="{ height: '386px' }" img-height="386px" :items="items2" class="mar_top"> </dof-swiper>
<div class="div_sty"></div>
<dof-catalog title="有圆点 小banner 限制10张图片" background-color="#daf9ca" :has-margin="true"></dof-catalog>
<dof-swiper :slider-style="{ height: '180px' }" img-height="180px" :items="items3" class="mar_top"> </dof-swiper>
<div class="div_sty"></div>
</scroller>
</div>
</template>
<style scoped>
.wrapper {
/* background-color: #f2f2f2; */
}
.div_sty {
width: 750px;
height: 100px;
}
.mar_top {
margin-top: 25px;
}
</style>
<script>
import { DofMinibar, DofCatalog, DofSwiper } from 'dolphin-intl-ui'
export default {
components: { DofSwiper, DofMinibar, DofCatalog },
// mixins: [base],
data() {
return {
leftButton: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/header/icon_back_white@3x.png',
showIndicator: false,
items0: [
{
title: 'item1',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152510859.png'
},
{
title: 'item2',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152448695.png'
},
{
title: 'item3',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152514533.png'
}
],
items1: [
{
title: 'item1',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152510859.png'
},
{
title: 'item2',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-160840730.jpg'
},
{
title: 'item3',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-160801298.png'
}
],
items2: [
{
title: 'item1',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152522918.png'
},
{
title: 'item2',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-160739420.jpg'
},
{
title: 'item3',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-160745218.jpg'
}
],
items3: [
{
title: 'item1',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152448695.png'
},
{
title: 'item2',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152510859.png'
},
{
title: 'item3',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152514533.png'
},
{
title: 'item4',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152518708.png'
},
{
title: 'item5',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152525995.png'
},
{
title: 'item6',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-160824117.jpg'
},
{
title: 'item7',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-160844222.jpg'
},
{
title: 'item8',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152448695.png'
},
{
title: 'item9',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152510859.png'
},
{
title: 'item10',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152514533.png'
},
{
title: 'item11',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-152525995.png'
},
{
title: 'item12',
url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/IMG20200731-160824117.jpg'
}
],
items4: [
{ title: 'item1', url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/004.png' },
{ title: 'item2', url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/004.png' },
{ title: 'item3', url: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/ui_library/swipe/004.png' }
]
}
},
methods: {
},
created() {
// this.isIos = weex.config.env.platform === 'iOS';
setTitle('Swiper')
}
}
</script>
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
# Attributes
| Prop | Type | Default | Description |
|---|---|---|---|
| slider-style | Object | {"width":"686px","height":"280px","position":"relative"} | 轮播容器样式 |
| items | Array | [] | 图片数据 |
| interval | Number | 3000 | 轮播间隔 |
| indicator-style | Object | {} | 指示点样式（可参考 Weex） |
| autoplay | Boolean | true | 是否自动播放 |
| infinite | Boolean | true | 是否循环播放 |
| img-resize | String | cover | 参考 <image> 的 resize 属性 |
| img-height | String | 280px | 图片高度 |
| img-width | String | 686px | 图片宽度 |
| div-left | String | 32px | 容器距逻辑起始侧的间距；LTR 为左侧，RTL 为右侧 |
| show-indicator | Boolean | true | 是否显示指示点 |
ph-img-url | String | 内置默认图 | 占位图 URL |
image-bg-color | String | '' | 图片背景颜色 |
need-dark-mode | Boolean | false | 是否启用 M-dark/T-dark 内置暗黑适配 |
indicator-color | String | '' | 指示器颜色 |
selected-indicator-color | String | '' | 选中指示器颜色 |
isRTL | Boolean | false | 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10 |
RTL 下轮播布局镜像，业务 items 数组无需反转；点击回调的 index 始终对应原数组索引。自动播放仍按逻辑索引递增，infinite=false 时停在逻辑末项。
设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。
颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。
indicatorStyle 中的业务颜色优先，支持颜色别名覆盖。
- 注1:
const config = {
sliderStyle: {
'width': '686px',
'height': '280px',
'position': 'relative'
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 注2:
items: [
{ title: 'item A', url: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg' },
{ title: 'item B', url: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg' },
{ title: 'item C', url: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg' }
]
1
2
3
4
5
2
3
4
5
- 注3：
const config = {
indicatorStyle: {
itemColor: 'rgba(255, 255, 255, .5)', // 未选中时的颜色
itemSelectedColor: 'rgba(255, 255, 255, 1)', // 选中时的颜色
itemSize: '12px' // 点半径
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
dofSwiperClicked | 轮播图点击事件 | event: {target, index},target:当前图片信息，index：当前索引 |