微信小程序实现文字跑马灯

前言

要实现跑马灯，最主要的是得到开始定界和结束定界的判断。1.9.3新增的wxml操作界面可以获取节点长度、宽度等属性。当然也可以直接用字符数*字符大小(注意字体单位px，rpx)。

翻译

短词

长词

页面结构

view class=' content ' text class=' every ' decode=' { { true } } ' style=' right : { { announcef } } { { announum } } px ' { announ } }/text/view js

我写在这里的wepy，只是凑合着用吧

Export default class shopindex扩展wepy.page { config={导航栏标题文本：' home page '，} data={//公告内容annonoun: '超长，超长，超长，超长，超长，超长，超长，超长，超长，超长v '，announ :announy : 280，announZf : 'var query=wepy . createselectorquery()；query.select('。内容')。boundingClientRect(ContentRes={ var query=wepy . createselectorquery()；查询。选择('。每一个')。bounding client correct(textres={//加一百是为了防止归零时闪烁。让max content width=content RES . width 100，max text width=text RES . width；//初始化自我。notify=text RES。宽度自我。$ apply()；//timer setinterval (()={if (self。notify=='-'){ if(self。notify=0){ self。notify=' ' } else { self。notify-=1 } } Else { if(self。notify(maxcontentwidth)){//返回到自我。宣布='-'自我。notify=maxtextwidth } else { self。notify=1 } } self。$ apply()；},5) }).exec()；}).exec()；} } - 2018-12-24 -

使用时注意setInterval的性能，不用时或不显示时停止，否则会像作者一样给自己挖坑。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。