小程序中实现文字跑马灯的效果

我的小程序需求中有一个功能需求是标题超过标题指定最大宽度时滚动播放

然后有在网上找资料，其实就是一个文字跑马灯的效果，用循环计时器来实现。在H5中，有一个<marquee></marquee>标签就可以实现，但是小程序得自己去实现

在wxml中的样式

    <view class='marquee' style='width:{{marqueeWidth}}rpx;'>
        <view class='marqueeTitle' style="margin-left:{{marqueeMargin}}px;{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}rpx;">{{title}}</view>
    </view>

在注册页面中去定义所需数据及实现的JS动效

Page({
  data: {
      // 滚动标题的字段
      title: "可怜的如胸口额us客人提供是列入他一会熟练度投入好就没事电视台",
      marqueePace: 1,   //滚动速度
      orientation: 'left',  //滚动方向
      marqueeDistance: 0,   //初始滚动距离
      marqueeDistance2: 0,
      size: 28,
      marqueeWidth: 400,
      marqueeMargin: 40,
      interval: 20,
  },
  onShow: function () {
      console.log('index.onShow');
      // 标题的显示
      var that = this;
      var length = that.data.title.length * that.data.size;     //计算文字的长度
      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 interval = setInterval(function(){
            if(-that.data.marqueeDistance < that.data.length){
                that.setData({
                    marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
                })
            }else{
                clearInterval(interval);
                that.setData({
                    marqueeDistance : that.data.marqueeWidth
                });
                that.run1();
            }
        },that.data.interval)
  }
})

效果图暂时不方便发出来，不过代码可以直接复制粘贴用。还有文字是先随手打了几个，，，看着可能不太雅观。。。