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

最新推荐文章于 2024-08-27 18:19:25 发布

Andy醒

最新推荐文章于 2024-08-27 18:19:25 发布

阅读量173

点赞数 2

分类专栏：鸿蒙os开发文章标签： harmonyos 鸿蒙 javascript

本文链接：https://blog.csdn.net/qq_28189091/article/details/141460458

版权

鸿蒙os开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图：

@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)
  }
}