小程序文字跑马灯(从右向左滚动)效果的实现

如图效果

直接上代码，一看就懂啦~  这里需要注意的是在小程序上style样式里面translate的单位rpx会无效，写成translateX( 空格 20rpx)就可以了

[code]<view class="warn">
<image src="{{IMG_URL}}/mod/coupon/assets/img/scenic/laba.png" style="width:40rpx;height:48rpx"></image>
<view class='marquee' style='width:{{marqueeWidth}}rpx;'>
<!-- style: transform:translateX rpx无效 解决方法 translateX('空格'300rpx) -->
<view class='marqueeTitle' style="width:{{length}}rpx;margin-left:{{marqueeMargin}}px;transform:translateX( {{marqueeDistance}}rpx);font-size: {{size}}rpx;">{{title}}</view>
</view>
</view>

[code].warn{
background: #FEEBB1;
height:60rpx;
padding: 0 20rpx;
display:flex;
align-items: center;
color: #B49D4E;
}
.marquee{
height: 100%;
overflow: hidden;
line-height: 60rpx;
}
.marqueeTitle{
height: 100%;
}

[code]Page({
data: {
IMG_URL:constant.IMG_URL,
title: "关注官方公众号，不错过任何咨询和回复~~~~~~~~",
marqueePace: 1,   //滚动速度
marqueeDistance: 0,   //初始滚动距离
size: 28,
marqueeWidth: 660,
marqueeMargin: 40
},
onShow: function () {
// 标题的显示
var that = this;
var length = that.data.title.length * that.data.size;     //计算文字的长度
console.log(length)
that.setData({
length: length,
// 当文字长度小于屏幕长度时，需要增加补白
marqueeMargin: length < that.data.marqueeWidth ? (that.data.marqueeWidth - length) / 4 : that.data.marqueeMargin
})
if (that.data.length > that.data.marqueeWidth) {
that.run1();
}
},
// 标题超过限制宽度时做滚动播放
run1: function () {
var that = this;
var mytime = setInterval(function () {
if (-that.data.marqueeDistance < that.data.length) {
that.setData({
marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
})
} else {
clearInterval(mytime);
that.setData({
marqueeDistance: that.data.marqueeWidth
});
that.run1();
}
}, 20)
}
})