HarmonyOS应用开发-marquee组件使用

1. 创建项目

1

1.创建项目

2.示例代码

hml

    {{marqueeCustomData}}    
 Start Stop    

css

.container {    flex-direction: column;    justify-content: flex-start;    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;    background-color: #F2F2F2;    text-color: #0D81F2;}

 js

export default {    data: { scrollAmount: 10, loop: 3, marqueeDir: 'left', marqueeCustomData: '节假日大酬宾，盛大开幕',    },    onStartClick (evt) { this.$element('customMarquee').start();    },    onStopClick (evt) { this.$element('customMarquee').stop();    }}

 3.效果展示