# 列表
基础的列表展示可承载文字、图标、段落，常用于界面中内容展示。
列表高度
列表高度目前主要分为 52pt、80pt 两种大小，摘要字段一般需要控制在一行以内，但当业务需求有特殊情况，描述文本需要转行时，高度可适当增加至 92pt；设计师在设计时需根据不同情况选用相应的样式。
列表中分割线
分割线粗细均为：1pt 颜色：#FFFFFF 10%
样式分为下图中三种：（分割线详细规则见分割线单独说明）
· 普通界面设置左边留 16pt，右边置顶；
· 插件页卡片中的分割线为左边对齐文字，右边距离卡片 16pt。
· 特殊情况时，可采用页面宽度长度。
列表中背景
APP二级页面背景色采用 #151617 色值
按下效果
按下或触碰时，色值：#B1C1EA 5% + #FFFFFF 10%
文字样式
主标题 16pt #FFFFFF 80%
副标题 12pt #FFFFFF 40%
右边选项说明文字
· 全局统一：16pt 两种色值：#B35336 、#FFFFFF 40% （多用于二级表单页面）
·文字较多时特殊处理： 12pt #666666 （整页面统一处理，出现较少）
# 示例
<template>
<div class="wrapper">
<dof-minibar title="4.5列表"></dof-minibar>
<scroller>
<div class="title-box">
<text class="title-text">窄列表</text>
</div>
<div class="cell-title-box">
<text class="cell-title">无图标</text>
</div>
<div class="cell-box">
<dof-cell title="空调" :has-arrow="false" :has-sub-bottom-border="true" @dofCellClicked="cellClickedHandler">
</dof-cell>
<dof-cell title="空调" :has-sub-bottom-border="true" :has-arrow="true" @dofCellClicked="cellClickedHandler">
</dof-cell>
<dof-cell title="当前家庭" right-text="小蓝的家" :has-arrow="true" @dofCellClicked="cellClickedHandler">
</dof-cell>
</div>
<div class="cell-title-box">
<text class="cell-title">有图标</text>
</div>
<div class="cell-box">
<dof-cell
:avatar-icon-font="'\u4744'"
:has-sub-bottom-border="true"
icon-size="big"
title="我的收藏"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
:avatar-icon-font="'\u4744'"
:has-sub-bottom-border="true"
icon-size="big"
title="我的收藏"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
:avatar-icon-font="'\u4744'"
title="我的收藏"
icon-size="big"
right-text="小蓝的家"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
</div>
<div class="card-box">
<div>
<div class="card-cell-title-box">
<text class="cell-title">卡片样式</text>
</div>
<div class="cell-box">
<dof-cell
title="饮食禁忌 cell"
right-text="无"
:fake-border-style="cardBorderStyle"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="吸烟情况"
right-text="不吸烟"
:fake-border-style="cardBorderStyle"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="饮酒情况"
right-text="不饮酒或一周不少于1次"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
</div>
</div>
</div>
<div class="title-box">
<text class="title-text">宽列表</text>
</div>
<div class="cell-box">
<dof-cell
title="客厅"
:cellStyle="cellStyle"
:has-arrow="true"
:has-sub-bottom-border="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="客厅"
right-text="小蓝的家"
:cellStyle="cellStyle"
:has-sub-bottom-border="true"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="电热水器"
desc="我的家 浴室"
:has-sub-bottom-border="true"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="电热水器"
desc="我的家 浴室"
right-text="小蓝的家"
:has-sub-bottom-border="true"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="19:00 23℃"
desc="每天 每天 每天 每天 每天 每天"
:has-arrow="false"
:has-margin="true"
:isHighlight="false"
@dofCellClicked="cellClickedHandler"
>
<dof-switch
slot="switch"
:checked="switchOn"
@dof-change="handleSwitchChange({ type: 'switchOn' })"
></dof-switch>
</dof-cell>
</div>
<div class="cell-title-box">
<text class="cell-title">有图标</text>
</div>
<div class="cell-box">
<dof-cell
title="客厅"
:avatar-icon-font="'\u4834'"
:fake-border-style="borderStyle2"
:cellStyle="cellStyle"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="客厅"
right-text="小蓝的家"
:cellStyle="cellStyle"
:avatar-icon-font="'\u4834'"
:fake-border-style="borderStyle2"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="电热水器"
desc="我的家 浴室"
:avatar-icon-font="'\u4834'"
:fake-border-style="borderStyle2"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="电热水器"
desc="我的家 浴室"
right-text="小蓝的家"
:avatar-icon-font="'\u4834'"
:fake-border-style="borderStyle2"
:has-arrow="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="19:00 23℃"
desc="每天 每天 每天 每天 每天 每天"
:avatar-icon-font="'\u4834'"
:has-arrow="false"
:has-margin="true"
:isHighlight="false"
@dofCellClicked="cellClickedHandler"
>
<dof-switch
slot="switch"
:checked="switchOn"
@dof-change="handleSwitchChange({ type: 'switchOn' })"
></dof-switch>
</dof-cell>
</div>
<div class="title-box">
<text class="title-text">卡片样式</text>
</div>
<div class="card-box">
<dof-cell
title="客厅"
:avatar-icon-font="'\u4834'"
:cellStyle="cellStyle"
:has-arrow="true"
:has-margin="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="客厅"
right-text="小蓝的家"
:cellStyle="cellStyle"
:avatar-icon-font="'\u4834'"
:has-arrow="true"
:has-margin="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="电热水器"
desc="我的家 浴室"
:avatar-icon-font="'\u4834'"
:has-arrow="true"
:has-margin="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="电热水器"
desc="我的家 浴室"
right-text="小蓝的家"
:avatar-icon-font="'\u4834'"
:has-arrow="true"
:has-margin="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="19:00 23℃"
desc="每天"
:avatar-icon-font="'\u4834'"
:has-arrow="true"
:has-margin="true"
@dofCellClicked="cellClickedHandler"
>
<dof-button
slot="switch"
type="primary"
pattern="plain_text"
:size="'small'"
text="已开启"
:textStyle="{ fontSize: '32px' }"
@dofButtonClicked="dofButtonClicked"
>
</dof-button>
</dof-cell>
<dof-cell
title="19:00 23℃"
desc="每天"
:avatar-icon-font="'\u4834'"
:has-arrow="false"
:has-margin="true"
:isHighlight="false"
@dofCellClicked="cellClickedHandler"
>
<dof-button
slot="switch"
type="primary"
pattern="plain"
text="按钮"
size="small"
@dofButtonClicked="dofButtonClicked"
></dof-button>
</dof-cell>
<dof-cell
title="19:00 23℃"
desc="每天 每天 每天 每天 每天 每天"
:avatar-icon-font="'\u4834'"
:has-arrow="false"
:has-margin="true"
:isHighlight="false"
@dofCellClicked="cellClickedHandler"
>
<dof-switch
slot="switch"
:checked="switchOn"
@dof-change="handleSwitchChange({ type: 'switchOn' })"
></dof-switch>
</dof-cell>
</div>
<div class="title-box">
<text class="title-text">列表状态</text>
</div>
<dof-cell
title="正常状态"
:cellStyle="cellStyle"
:avatar-icon-font="'\u4834'"
:has-arrow="true"
:has-margin="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
<dof-cell
title="失效/禁用"
:cellStyle="cellStyle"
:avatar-icon-font="'\u4834'"
:has-arrow="true"
:has-margin="true"
:disabled="true"
@dofCellClicked="cellClickedHandler"
>
</dof-cell>
</scroller>
</div>
</template>
<style scoped>
.wrapper {
background-color: #f9f9f9;
}
.title-box {
padding: 32px;
background-color: #e5e5e8;
}
.title-text {
font-family: PingFangSC-Medium;
font-size: 36px;
color: #000000;
font-weight: 500;
}
.cell-item {
margin-top: 16px;
margin-bottom: 16px;
}
.cell-title-box {
padding: 44px 32px 28px;
}
.cell-title {
font-size: 28px;
color: #333;
}
.card-box {
padding: 48px 32px;
}
.card-cell-title-box {
padding: 48px 32px;
padding-left: 0px;
}
.cell-box {
background-color: #fff;
}
@media screen and (weex-theme: colmo) {
.wrapper {
background-color: #151617;
}
.cell-title {
color: rgba(255, 255, 255, 0.4);
}
.cell-box {
background-color: #1d1f22;
}
}
</style>
<script>
import { DofMinibar, DofCell, DofButton, DofSwitch } from 'dolphin-weex-ui'
export default {
components: { DofMinibar, DofCell, DofButton, DofSwitch },
data: () => ({
cardBorderStyle: {
left: '24px',
right: '24px'
},
borderStyle2: {
left: '30px',
right: '0px'
},
cellStyle: {
height: '160px'
},
switchOn: true
}),
computed: {},
created() {},
methods: {
//列表点击
cellClickedHandler() {
this.$toast('cell clicked')
},
//开关切换
handleSwitchChange(e) {
// this.$toast(e)
let { type } = e
this[type] = !this[type]
},
//按钮点击
dofButtonClicked() {
this.$toast('button clicked')
}
}
}
</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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| avatar-icon | String | N | - | cell左边图片 |
| icon-size | String | N | big | cell左边图片的尺寸 可选项 min\medium\big\max |
| special | Boolean | N | false | 支持cell特殊尺寸类型，行高为92pt,常用于desc多行文字情况 |
| icon-color | String | N | transparent | 图片区域背景色，用于透明背景的图片可以加背景色 |
| badgeNum | Number String | - | - | 徽标内容，如12, 'hot' |
| badgeMax | Number | - | - | 徽标内容最大值，如设置99, 则显示'99+' |
| badgeTheme | String | red | - | 颜色主题，可选值为: brand red purple blue-purple blue cyan yellow orange orange-red gray-offline |
| badgeColor | String | - | red | 自定义徽标背景颜色 |
| has-dot | Boolean | Y | false | cell左边图片是否有红色圆点 |
| title | String | Y | - | cell列表标题 |
| tag | String | Y | - | cell标题右侧的tag标签 |
| desc | String | N | - | 展示说明信息 |
| right-text | String | N | - | 右侧"设置"文本文案 |
| right-tip | String | N | - | cell列表右侧上方的 tips |
| right-text-style | {} | N | {} | 自定义richText的样式 |
| has-arrow | Bool | N | true | 是否显示箭头 |
| has-margin | Boolean | N | - | cell之间是否有margin，下方会显示一个外边距 |
| has-top-border | Boolean | N | false | 是否有上边框 |
| has-sub-top-border | Boolean | N | false | 是否有上内边框 |
| has-bottom-border | Boolean | N | false | 是否有下外边框 |
| has-sub-bottom-border | Boolean | N | true | 是否有下内边框 |
| disabled | Boolean | N | false | 是否禁用当前cell |
| is-highlight | Boolean | N | true | 点击cell列表时，是否显示点击效果背景色 |
| background-color | String | N | #1d1f22 | cell的背景色 |
| cell-style | Object | N | {} | 自定义cell的样式 |
| text-color | String | N | `` | cell内部文字的颜色 |
| fake-border-style | Object | N | {} | 自定义border的样式，可适配卡片样式列表的边框 |
# Slot
<slot></slot>：默认插槽，覆盖cell内部内容。<slot name="switch"></slot>：右边插槽，可以添加switch等组件<slot name="desc"></slot>：描述详情插槽<slot name="rightText"></slot>：右边图片插槽，rightTip、rightText、placeHolder的外层容器<slot name="rightTip"></slot>：右边rightTip的插槽<slot name="leftImg"></slot>：左侧图标插槽
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
dofCellClicked | cell点击事件 | - |
dofRightTipClicked | 右上角的rightTip点击事件 | - |
点我扫二维码 查看demo