微信小程序实现跑马灯效果

网上很多实现跑马灯的文章，但是很多发现都是不行的，之一就是文字宽度居然是通过字符数*文字大小计算，明显是不准确的计算方式。我看了下，发现可以通过计算控件宽度来精确计算文字宽度，这样实现的跑马灯是比较完善的。

效果如下：

实现代码如下：

wxml:

view class=' Rollcon ' view class=' box ' view class=' text ' style=' left : { { offsetLeft } } px " { text } }/view/view/view wxss 3360。rollCon { position:固定；top : 0；左： 0；宽度： 100%;height : 60 rpxz-index : 100；背景技术# fde8c 7 font-size : 20 rpx；线高： 60 rpx}.盒子{宽度： 100%；相对位置：}.文本{空白： nowrap绝对位置：top : 0；font-size : 24px}js:

页面({ /** *页面的初始数据*/data: { interval: null，text: '995年Java脚本语言诞生时如早一年，pace: 1.2，//滚动速度interval: 20，//时间间隔size: 24，//字体大小在px长度： 0中，//字体宽度offsetLeft: 0，//windowWidth: 0，}，//根据视图身份查询视角的宽度查询视图宽度：函数（视图Id) { //创建节点选择器返回新的承诺(函数(解析){ var query=wx。createselectorquery()；变量=这个；query.select('。'视图标识)。boundingClientRect(函数{ resolve(rect。宽度)；}).exec()；});}, //停止跑马灯stopMarquee:函数(){ var=this//清除旧的定时器if (that.data！=null) { clearInterval(即。间隔)；} }, //执行跑马灯动画原谅我：函数(){ var=this如果(那个。数据。长度。数据。窗口宽度){//设置循环让interval=setInterval(函数(){ if(即。数据。offsetleft=0){ if(that。数据。offset left=-那个。数据。长度){那个。setdata({ offsetleft 3360。数据。步伐，})否则{那。setdata({ offsetleft 3360。数据。窗口宽度，})}其他{那个。setdata({ offsetleft 3360。数据。offsetleft-data} }，//开始跑马灯startMarquee:函数(){ var=this那个。stop marquee()；//初始化数据那个。数据。窗口宽度=wx。getsysteminfosync().windowWidththat.queryViewWidth(文本).然后（函数(解决){那个。数据。长度=解析；控制台。记录(那个。数据。长度/'那个。数据。窗口宽度)；那个。exceps animation()；});} })源码下载：跑马灯效果

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