HarmonyOS应用开发文档更新修改说明:marquee组件补充示例代码和示例效果图,方便开发者掌握该组件的使用方式。
跑马灯组件,用于展示一段单行滚动的文字。
智慧屏 |
智能穿戴 |
---|---|
支持 |
支持 |
无
不支持。
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
scrollamount |
number |
6 |
否 |
跑马灯每次滚动时移动的最大长度。 |
loop |
number |
-1 |
否 |
跑马灯滚动的次数。如果未指定,则默认值为-1,当该值小于等于零时表示marquee将连续滚动。 |
direction |
string |
left |
否 |
设置跑马灯的文字滚动方向,可选值为left和right。 |
id |
string |
- |
否 |
组件的唯一标识。 |
style |
string |
- |
否 |
组件的样式声明。 |
class |
string |
- |
否 |
组件的样式类,用于引用样式表。 |
ref |
string |
- |
否 |
用来指定指向子元素或子组件的引用信息,该引用将注册到父组件的$refs 属性对象上。 |
disabled |
boolean |
false |
否 |
当前组件是否被禁用,在禁用场景下,组件将无法响应用户交互。 |
focusable |
boolean |
false |
否 |
当前组件是否可以获取焦点。 当focusable设置为true时,组件可以响应焦点事件和按键事件。当组件额外设置了按键事件或者点击事件时,框架会设置该属性为true。 |
data |
string |
- |
否 |
给当前组件设置data属性,进行相应的数据存储和读取。 |
名称 |
参数 |
描述 |
---|---|---|
bounce |
- |
当文本滚动到末尾时触发该事件。 |
finish |
- |
当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。 |
start |
- |
当文本滚动开始时触发该事件。 |
touchstart |
TouchEvent |
手指刚触摸屏幕时触发该事件。 |
touchmove |
TouchEvent |
手指触摸屏幕后移动时触发该事件。 |
touchcancel |
TouchEvent |
手指触摸屏幕中动作被打断时触发该事件。 |
touchend |
TouchEvent |
手指触摸结束离开屏幕时触发该事件。 |
click |
- |
点击动作触发该事件。 |
longpress |
- |
长按动作触发该事件。 |
focus |
- |
获得焦点时触发该事件,span组件无法获取焦点。 |
blur |
- |
失去焦点时触发该事件,span组件无法失去焦点。 |
key |
KeyEvent |
智慧屏特有的按键事件,当用户操作遥控器按键时触发。
|
名称 |
类型 |
默认值 |
必填 |
描述 |
---|---|---|---|---|
color |
|
智慧屏:#e5ffffff 智能穿戴:#ffffffff |
否 |
设置跑马灯中文字的文本颜色。 |
font-size |
|
37.5 |
否 |
设置跑马灯中文字的文本尺寸。 |
allow-scale |
boolean |
true |
否 |
设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 说明 如果在config描述文件中针对ability配置了fontSize的config-changes标签,则应用不会重启而直接生效。 |
font-weight |
number | string |
normal |
否 |
设置跑马灯中文字的字体的粗细,见text组件font-weight的样式属性。 |
font-family |
string |
sans-serif |
否 |
设置跑马灯中文字的字体列表,用逗号分隔,每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体,会被选中作为文本的字体。 |
width |
|
- |
否 |
设置组件自身的宽度。 缺省时使用元素自身内容需要的宽度。 |
height |
|
- |
否 |
设置组件自身的高度。 缺省时使用元素自身内容需要的高度。 |
padding |
|
0 |
否 |
使用简写属性设置所有的内边距属性。 该属性可以有1到4个值:
|
padding-[left|top|right|bottom] |
|
0 |
否 |
设置左、上、右、下内边距属性。 |
padding-[start|end] |
|
0 |
否 |
设置起始和末端内边距属性。 |
margin |
|
0 |
否 |
使用简写属性设置所有的外边距属性,该属性可以有1到4个值。
|
margin-[left|top|right|bottom] |
|
0 |
否 |
设置左、上、右、下外边距属性。 |
margin-[start|end] |
|
0 |
否 |
设置起始和末端外边距属性。 |
border |
- |
0 |
否 |
使用简写属性设置所有的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置时,各属性值为默认值。 |
border-style |
string |
solid |
否 |
使用简写属性设置所有边框的样式,可选值为:
|
border-[left|top|right|bottom]-style |
string |
solid |
否 |
分别设置左、上、右、下四个边框的样式,可选值为dotted、dashed、solid。 |
border-[left|top|right|bottom] |
- |
- |
否 |
使用简写属性设置对应位置的边框属性,包含边框的宽度,样式,颜色属性,顺序设置为border-width、border-style、border-color,不设置的值为默认值。 |
border-width |
|
0 |
否 |
使用简写属性设置元素的所有边框宽度,或者单独为各边边框设置宽度。 |
border-[left|top|right|bottom]-width |
|
0 |
否 |
分别设置左、上、右、下四个边框的宽度。 |
border-color |
|
black |
否 |
使用简写属性设置元素的所有边框颜色,或者单独为各边边框设置颜色。 |
border-[left|top|right|bottom]-color |
|
black |
否 |
分别设置左、上、右、下四个边框的颜色。 |
border-radius |
|
- |
否 |
border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color ,border-[left|top|right|bottom]-style,如果要设置color、width和style,需要将四个方向一起设置(border-width、border-color、border-style)。 |
border-[top|bottom]-[left|right]-radius |
|
- |
否 |
分别设置左上,右上,右下和左下四个角的圆角半径。 |
background |
|
- |
否 |
仅支持设置渐变样式,与background-color、background-image不兼容。 |
background-color |
|
- |
否 |
设置背景颜色。 |
background-image |
string |
- |
否 |
设置背景图片。与background-color、background不兼容;支持网络图片资源和本地图片资源地址。 |
background-size |
|
auto |
否 |
设置背景图片的大小。
|
background-repeat |
string |
repeat |
否 |
针对重复背景图像样式进行设置,背景图像默认在水平和垂直方向上重复。
|
background-position |
|
0px 0px |
否 |
|
opacity |
number |
1 |
否 |
元素的透明度,取值范围为0到1,1表示为不透明,0表示为完全透明。 |
display |
string |
flex |
否 |
确定一个元素所产生的框的类型,可选值为:
|
visibility |
string |
visible |
否 |
是否显示元素所产生的框。不可见的框会占用布局(将'display'属性设置为'none'来完全去除框),可选值为:
|
flex |
number |
- |
否 |
规定当前组件如何适应父组件中的可用空间。它作为一个简写属性,用来设置组件的flex-grow。
|
flex-grow |
number |
0 |
否 |
设置组件的拉伸样式,指定父组件容器主轴方向上剩余空间(容器本身大小减去所有flex子元素占用的大小)的分配权重。0为不伸展。
|
flex-shrink |
number |
1 |
否 |
设置组件的收缩样式,元素仅在默认宽度之和大于容器的时候才会发生收缩,0为不收缩。
|
flex-basis |
|
- |
否 |
设置组件在主轴方向上的初始大小。
|
position |
string |
relative |
否 |
设置元素的定位类型,不支持动态变更。
|
[left|top|right|bottom] |
|
- |
否 |
left|top|right|bottom需要配合position样式使用,来确定元素的偏移位置。
|
名称 |
参数 |
描述 |
---|---|---|
start |
- |
开始滚动。 |
stop |
- |
停止滚动。 |
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #ffffff;
}
.customMarquee {
width: 100%;
height: 80px;
padding: 10px;
margin: 20px;
border: 4px solid #ff8888;
border-radius: 20px;
font-size: 40px;
color: #ff8888;
font-weight: bolder;
font-family: serif;
background-color: #ffdddd;
}
.content {
flex-direction: row;
}
.controlButton {
flex-grow: 1;
}
// xxx.js
export default {
data: {
scrollAmount: 30,
loop: 3,
marqueeDir: 'left',
marqueeCustomData: 'Custom marquee',
},
onMarqueeBounce: function() {
console.log("onMarqueeBounce");
},
onMarqueeStart: function() {
console.log("onMarqueeStart");
},
onMarqueeFinish: function() {
console.log("onMarqueeFinish");
},
onStartClick (evt) {
this.$element('customMarquee').start();
},
onStopClick (evt) {
this.$element('customMarquee').stop();
}
}