鸿蒙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)
  }
}
相关推荐
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
真夜2 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
艾小码2 小时前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
干就完了12 小时前
js对象常用方法都在这,使用时想不到?不存在的
前端·javascript
艾小码2 小时前
还在硬邦邦跳转页面?Vue这3招让应用丝滑如德芙!
前端·javascript·vue.js
子兮曰2 小时前
🚀前端依赖配置避坑指南:深度解析package.json中devDependencies的常见误解
前端·javascript·npm
forever_Mamba2 小时前
实现一个高性能倒计时:从踩坑到最佳实践
前端·javascript
小帆聊前端2 小时前
JS 原型链深度解读:从混乱到通透,掌握 90% 前端面试核心
javascript
子兮曰2 小时前
浏览器与 Node.js 全局变量体系详解:从 window 到 global 的核心差异
前端·javascript·node.js
召摇2 小时前
API 设计最佳实践 Javascript 篇
前端·javascript·vue.js