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

<view class="rollCon">
 <view class='box'> 
 <view class='text'style='left:{{offsetLeft}}px' >{{text}}</view>
</view>
</view>

.rollCon {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 60rpx;
 z-index: 100;
 background: #fde8c7;
 font-size: 20rpx;
 line-height: 60rpx;
}

.box {
 width: 100%;
 position: relative;
}

.text {
 white-space: nowrap;
 position: absolute;
 top: 0;
 font-size: 24px;
}

Page({

 /**
 * 页面的初始数据
 */
 data: {
 interval: null,
 text: '995年JavaScript诞生时如早一年',
 pace: 1.2, //滚动速度
 interval: 20, //时间间隔
 size: 24, //字体大小in px
 length: 0, //字体宽度
 offsetLeft: 0, //
 windowWidth: 0,
 },
 //根据viewId查询view的宽度
 queryViewWidth: function(viewId) {
 //创建节点选择器
 return new Promise(function(resolve) {
 var query = wx.createSelectorQuery();
 var that = this;
 query.select('.' + viewId).boundingClientRect(function(rect) {
 resolve(rect.width);
 }).exec();
 });

 },
 //停止跑马灯
 stopMarquee: function() {
 var that = this;
 //清除旧的定时器
 if (that.data != null) {
 clearInterval(that.interval);
 }
 },
 //执行跑马灯动画
 excuseAnimation: function() {
 var that = this;
 if (that.data.length > that.data.windowWidth) {
 //设置循环
 let interval = setInterval(function() {
 if (that.data.offsetLeft <= 0) {
 if (that.data.offsetLeft >= -that.data.length) {
 that.setData({
 offsetLeft: that.data.offsetLeft - that.data.pace,
 })
 } else {
 that.setData({
 offsetLeft: that.data.windowWidth,
 })
 }
 } else {
 that.setData({
 offsetLeft: that.data.offsetLeft - that.data.pace,
 })
 }
 }, that.data.interval);
 }
 },
 //开始跑马灯
 startMarquee: function() {
 var that = this;
 that.stopMarquee();
 //初始化数据
 that.data.windowWidth = wx.getSystemInfoSync().windowWidth;
 that.queryViewWidth('text').then(function(resolve) {
 that.data.length = resolve;
 console.log(that.data.length + "/" + that.data.windowWidth);
 that.excuseAnimation();
 });
 }
 })