鸿蒙os开发-------跑马灯 marquee的使用

效果图:

复制代码
@Component
export  struct MarqueeScroll{
  private  marqueeText: string = ''



  build() {
    Column() {
      Flex({ alignItems: ItemAlign.Center}) {
        Image($r('app.media.ic_new_ticker'))
          .width(20)
          .height(20)
          .margin({left:15,right:10})
        Marquee({
          src:this.marqueeText,
          start:true, //开始
          step:6, //速度,默认6
          loop:-1, //6循环次数,-1循环滚动
        })
          .margin({right:15})
          .fontColor($r('app.color.color_54ABFD'))
          .fontSize(13)
            //开始
          .onStart(() => {
            console.info('Marquee onStart')
          })
            //文本播放一次结束
          .onBounce(() => {
            console.info('Marquee onBounce')
          })
            //完成
          .onFinish(() => {
            console.info('Marquee onFinish')
          })
      }
      //设置父组件的宽度小于文本宽度
      .width('90%')
      .height(40)
      .backgroundColor($r('app.color.white'))
      .borderRadius(16)
    }
    .width('100%')
    .height(40)
  }
}
相关推荐
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
程序员江同学1 小时前
ovCompose + AI 开发跨三端的 Now in Kotlin App
android·kotlin·harmonyos
萌萌哒草头将军1 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL2 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉2 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~2 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng2 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript