文章目录先确定内容适不适合滚动速度和循环次数要给控制权标签和颜色负责降低识别成本页面结构怎么看完整代码写在最后跑马灯组件挺容易被滥用。公告太长、速度太快、颜色太花用户最后只会觉得烦。但在一些场景里它确实有用比如系统维护提醒、活动通知、行情滚动。这个 HarmonyOS7 页面把 Marquee 放进公告和行情两个场景里看重点不是“文字会滚”而是怎么让滚动信息可读、不打扰。先确定内容适不适合滚动代码里有NoticeItem_12ag和StockItem_j4e6两类数据。公告有标签、内容和配色行情有代码、名称、价格、涨跌幅。它们都有一个共同点信息短、更新快、适合一眼扫过。如果是一篇说明文、协议条款、长活动规则就不适合塞进 Marquee。用户读不完也不愿意等它慢慢滚过去。速度和循环次数要给控制权页面里用marqueeStart、speed、loop管理滚动状态。这个设计比固定播放好很多调试时能暂停业务上也可以根据场景决定滚动速度和循环次数。公告类信息通常速度要慢一点行情类可以稍快。速度不是越快越高级能读清楚才是第一位。标签和颜色负责降低识别成本公告列表里每条都有tagColor和tagBg。这不是单纯为了好看而是让用户快速区分“紧急”“活动”“公告”这几类信息。跑马灯本身已经在动了颜色就别再过度刺激。背景淡一点、文字颜色明确一点读起来会舒服很多。页面结构怎么看MarqueeNoticePage分成新闻公告滚动栏、股票行情滚动、速度控制和彩色样式展示。读代码时先看数据结构再看 Marquee 的启动、速度和循环参数最后看不同场景下的样式差异。如果你要接真实接口把noticeList或stocks替换成接口数据就行。记得在数据为空时给一个静态提示不要让空跑马灯在页面上占位置。完整代码下面是完整代码。入口组件名是MarqueeNoticePage适合作为公告栏、行情条、活动提醒的实现参考。// Marquee 跑马灯文字interfaceNoticeItem_12ag{id:numbertag:stringcontent:stringtagColor:stringtagBg:string}interfaceStockItem_j4e6{id:numbercode:stringname:stringprice:stringchange:stringisUp:boolean}EntryComponentstruct MarqueeNoticePage{StatemarqueeStart:booleantrueStatespeed:number60Stateloop:number-1StatenoticeList:NoticeItem_12ag[][{id:1,tag:紧急,content:系统将于今晚 22:00-24:00 进行维护升级请提前保存您的数据。,tagColor:#991B1B,tagBg:#FEE2E2},{id:2,tag:活动,content:618 年中大促开始啦全场商品低至五折满减优惠不叠加先到先得,tagColor:#065F46,tagBg:#D1FAE5},{id:3,tag:公告,content:新功能上线支持多设备同步您的数据随时随地可访问。,tagColor:#1E40AF,tagBg:#DBEAFE},]Statestocks:StockItem_j4e6[][{id:1,code:000001,name:平安银行,price:11.85,change:2.34%,isUp:true},{id:2,code:600036,name:招商银行,price:36.42,change:-0.85%,isUp:false},{id:3,code:601318,name:中国平安,price:47.66,change:1.12%,isUp:true},{id:4,code:000858,name:五粮液,price:128.90,change:-1.56%,isUp:false},]build(){Column({space:0}){// 标题Text(Marquee 跑马灯).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%).padding({left:20,right:20,top:20,bottom:4})Text(横向滚动文字的各种使用场景).fontSize(13).fontColor(#6B7280).width(100%).padding({left:20,right:20,bottom:16})// 一、新闻公告栏Column({space:10}){Text(一、新闻公告滚动栏).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Column({space:8}){ForEach(this.noticeList,(notice:NoticeItem_12ag){Row({space:10}){Text(notice.tag).fontSize(11).fontColor(notice.tagColor).backgroundColor(notice.tagBg).padding({left:6,right:6,top:2,bottom:2}).borderRadius(4).fontWeight(FontWeight.Bold)Marquee({start:this.marqueeStart,step:this.speed,loop:this.loop,fromStart:true,src:notice.content}).fontSize(13).fontColor(#374151).layoutWeight(1)}.width(100%).padding({left:12,right:12,top:10,bottom:10}).backgroundColor(#FAFAFA).borderRadius(8)},(notice:NoticeItem_12ag)notice.id.toString())}}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 二、股票行情栏Column({space:10}){Text(二、股票行情滚动).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Row({space:8}){Text(行情).fontSize(12).fontColor(#FFFFFF).backgroundColor(#EF4444).padding({left:8,right:8,top:4,bottom:4}).borderRadius(4)Marquee({start:this.marqueeStart,step:50,loop:-1,fromStart:true,src:this.stocks.map((s:StockItem_j4e6)${s.name}${s.price}${s.change}).join()}).fontSize(13).fontColor(#1F2937).layoutWeight(1)}.width(100%).padding({left:12,right:12,top:10,bottom:10}).backgroundColor(#FFF7ED).borderRadius(8).alignItems(VerticalAlign.Center)}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 三、速度控制Column({space:12}){Text(三、速度与控制).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)// 演示文字Row(){Marquee({start:this.marqueeStart,step:this.speed,loop:-1,fromStart:true,src: 当前速度this.speed.toString() px/s —— HarmonyOS ArkUI Marquee 组件演示 ——}).fontSize(14).fontColor(#2563EB).fontWeight(FontWeight.Medium)}.width(100%).padding({left:12,right:12,top:12,bottom:12}).backgroundColor(#EFF6FF).borderRadius(8)// 速度调节Row({space:12}){Text(速度).fontSize(13).fontColor(#374151)Slider({value:this.speed,min:20,max:200,step:10,style:SliderStyle.OutSet}).layoutWeight(1).selectedColor(#2563EB).trackColor(#E5E7EB).onChange((val:number){this.speedval})Text(this.speed.toString()).fontSize(13).fontColor(#2563EB).width(36).textAlign(TextAlign.End)}.width(100%).alignItems(VerticalAlign.Center)// 开始/停止Row({space:12}){Button(this.marqueeStart?⏸ 暂停:▶️ 播放).fontSize(13).fontColor(this.marqueeStart?#92400E:#065F46).backgroundColor(this.marqueeStart?#FEF3C7:#D1FAE5).borderRadius(20).padding({left:20,right:20,top:8,bottom:8}).onClick((){this.marqueeStart!this.marqueeStart})}}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 四、彩色样式Column({space:10}){Text(四、彩色样式展示).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Column({space:6}){Marquee({start:true,step:40,loop:-1,fromStart:true,src: 紧急请立即更新您的密码保障账户安全}).fontSize(13).fontColor(#FFFFFF).width(100%).padding({left:12,right:12,top:8,bottom:8}).backgroundColor(#EF4444).borderRadius(6)Marquee({start:true,step:35,loop:-1,fromStart:true,src: 活动进行中满300减50今晚12点截止抓紧下单}).fontSize(13).fontColor(#FFFFFF).width(100%).padding({left:12,right:12,top:8,bottom:8}).backgroundColor(#059669).borderRadius(6)Marquee({start:true,step:45,loop:-1,fromStart:true,src: 新功能智能助手上线支持语音输入体验更便捷}).fontSize(13).fontColor(#FFFFFF).width(100%).padding({left:12,right:12,top:8,bottom:8}).backgroundColor(#2563EB).borderRadius(6)}}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start)Blank()}.width(100%).height(100%).backgroundColor(#FFFFFF)}}写在最后这个例子不复杂但很适合反复看。很多 ArkUI 页面写不顺其实不是组件不会用而是状态、结构和反馈没有放在一起设计。