微信小程序—通知栏文字从左到右无限接滚动

微信小程序—通知栏文字从左到右无限接滚动

wxml

<view class="marquee_box">
	  <text 
	    class="marquee_text" 
	    style="transform: translateX(-{
  {marqueeDistance}}rpx)"
	  >{
  {text}}</text>  
</view>

wxss

.marquee_box{
  width: 580rpx;
  height: 38rpx;
  position:relative;
  color:#1eb1b8;
  display:block;
  overflow:hidden;
} 
 .marquee_text{
  height: 38rpx;
  line-height: 38rpx;
  white-space: nowrap;
  position: absolute;
  top: 0;
  font-size: 22rpx;
}

js

data: {
	// 通知
    text: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX123',
    marqueePace: 1,//滚动速度
    marqueeDistance: 0,//初始滚动距离
    size: 22,
    interval: 20 // 时间间隔
},
onShow: function () {
    var that = this;
    var length = that.data.text.length * that.data.size;//文字长度
    var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
    that