微信小程序短文字居中，长文字跑马灯效果

Html代码

<view class="info_box_happy">
    <view class="info_box_happy_txt" style="width: {{textW}}px;margin-left: {{textL}}px">{{textN}}view>
view>

Css代码

.info_box_happy{
    font-size: 12px;
    color: #333;
    white-space : nowrap;
    padding: 10rpx 3rpx;
    background: #fff;
    border-bottom: 2rpx #f5f5f5 solid;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.info_box_happy_txt{
    color: red;
    width: 100%;
    position: relative;
}

Js代码

page{
    textM:0,
    textN:'元旦快乐！元旦快乐！元旦快乐！元旦快乐！',
    textW:0,
    textL:50, 
}
  onLoad: function (options) {
    var that = this;
    var textM = 20;
    //获取屏幕宽度的封装方法
    var phoneWidth = util.nowPhoneWH()[0];
    //文字宽度=文字长度+字体大小
    var textW = parseInt(Number(that.data.textN.length)*12);
    that.setData({textW:textW,textL:phoneWidth});
    if(phoneWidth>textW){
      var centerL = Number(phoneWidth/2)-(Number(textW)/2)
      that.setData({textL:centerL});
    }else{
      var textTime = setInterval(function(){
        var textL = that.data.textL;
        if(textL<-(textW-20)){
          that.setData({textL:phoneWidth})
          return
        }
        textL-=2;
        that.setData({textL:textL})
      },30)
    }
  },