marquee为跑马灯组件,用于展示一段单行滚动的文字。具体用法请参考marquee。
创建marquee组件
在pages/index目录下的hml文件中创建一个marquee组件。
<!-- xxx.hml -->
<div class="container">
<marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">It's a racing lamp.</marquee>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
设置属性和样式
marquee通过color和font-weight属性设置跑马灯中文本的颜色、字体粗细和边框样式。
<!-- xxx.hml -->
<div class="container">
<marquee class="custommarquee">It's a racing lamp.</marquee>
</div>
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
.custommarquee {
width: 100%;
height: 80px;
padding: 10px;
margin: 20px;
border: 4px solid #6712f1;
border-radius: 20px;
font-size: 40px;
color: #ffffff; font-weight: bolder;
font-family: serif;
background-color: #1567f3;
}
通过scrollamount、loop和direction属性实现跑马灯滚动时移动的最大长度、滚动次数和文字滚动方向。
<!-- xxx.hml -->
<div class="tutorial-page">
<div class="mymarquee">