# 8.3 跑马灯（Marquee）
文字走马灯滚动组件
- 文字水平滚动 设置text字符串即可
- 多条内容垂直滚动需要传递Array
# 实例
# 基础用法
<template>
<div class="wrapper">
<dof-minibar
title="Prompt"
background-color="#0092d7"
text-color="#ffffff"
:left-button="leftButton"
right-text="more"
>
<div slot="right" class="right-img-wrapper">
<dof-icon
:iconStyle="{ fontSize: '36px', color: '#fff' }"
name="refresh"
@dofIconClicked="refreshPageHandler"
></dof-icon>
</div>
</dof-minibar>
<div class="dof-demo">
<dof-marquee
width="750px"
textWidth="2000px"
:text="text"
bgColor="#4676FF"
textColor="#fff"
:duration="8000"
:delay="2000"
>
</dof-marquee>
<div class="wrap">
<dof-icon name="search" :icon-style="iconSearchStyle"></dof-icon>
<dof-marquee
width="690px"
textWidth="1420px"
:text="text"
bgColor="#fff"
textColor="#333"
:duration="8000"
:delay="2000"
>
</dof-marquee>
</div>
<dof-marquee
width="750px"
height="60px"
:text="textArray"
direction="column"
bgColor="#f9f9f9"
textColor="#267AFF"
:duration="3000"
:delay="2000"
>
</dof-marquee>
</div>
</div>
</template>
<style type="text/css" scoped>
.dof-demo {
margin-top: 32px;
background-color: #fff;
}
.wrap {
width: 750px;
height: 82px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dcdcdc;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #dcdcdc;
margin-top: 40px;
margin-bottom: 40px;
flex-direction: row;
justify-content: center;
align-items: center;
}
</style>
<script>
import { DofMinibar, DofMarquee, DofIcon } from 'dolphin-intl-ui'
import nativeService from 'src/service/nativeService.js'
export default {
components: {
DofMarquee,
DofIcon,
DofMinibar
},
data() {
return {
leftButton: '/assets/image/header/back_white@2x.png',
text:
'dolphinWeex UI 框架基于weex跨平台解决方案，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。',
iconSearchStyle: {
'font-size': '32px',
color: '#ccc',
height: '34px',
width: '44px',
'margin-left': '8px'
},
textArray: [
'1.dolphinWeex UI 框架基于weex跨平台解决方案，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。',
'2.轻量、高效、性能好',
'3.apache 孵化顶级项目',
'4.阿里巴巴开源框架'
]
}
},
methods: {
refreshPageHandler() {
nativeService.reload()
}
}
}
</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
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
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| width | String | N | "750px" | 滚动框的宽度 |
| height | String | N | "80px" | 滚动框的高度 |
| textWidth | String | N | "750px" | 文字长度 |
| text | String / Array | N | - | 滚动文字 String/Array |
| textColor | String | N | '' | 文字颜色 |
| bgColor | String | N | '' | 背景颜色 |
| duration | Number | N | 5000 | 持续时间 |
| delay | Number | N | 0 | 延迟时间 |
| direction | String | N | row | 内容布局方向，支持 row、column |
| fontSize | String | N | 32px | 字体大小 |
needDarkMode | Boolean | N | false | 是否启用 M-dark/T-dark 内置暗黑适配 |
设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。
颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。