小程序文字滚动

小程序公告栏跑马灯效果如下：

具体代码如下：
wxml:

<scroll-view class="container_mag">
  <view class="scrolltxt">
    <view class="marquee_box">
      <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
        <text>{{text}}</text>
        <text style="margin-right:{{marquee_margin}}px;"></text>
        <text style="margin-right:{{marquee_margin}}px;">{{text}}</text>        
      </view>
    </view>
  </view>
</scroll-view>

wxss：

.container_mag {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.scrolltxt{
  background-color: rgb(173, 87, 87);  
}
.marquee_box {
  position:relative;
  
  height:60rpx;
  display:block;
  overflow:hidden;
} 
.marquee_text {
  white-space: nowrap;
  position:absolute;
  font-size:12px;
  height:50rpx;
  line-height:50rpx;
}

js:

data: {
      // 文字滚动通知
    text: "希望广大同学积极转发此小程序，方便大家的使用！！",
    marqueePace: 1,//滚动速度
    marqueeDistance: 0,//初始滚动距离
    marquee_margin: 30,
    size:14,
    interval: 20 ,// 时间间隔
    }

onShow: function () {
    // 以下为文字滚动事件
    var that = this;
    var length = that.data.text.length * that.data.size;//文字长度
    var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
    //console.log(length,windowWidth);
    that.setData({
      length: length,
      windowWidth: windowWidth
    });
    that.scrolltxt();// 第一个字消失后立即从右边出现
  },
 
  scrolltxt: function () {
    var that = this;
    var length = that.data.length;//滚动文字的宽度
    var windowWidth = that.data.windowWidth;//屏幕宽度
    if (length > windowWidth){
      var interval = setInterval(function () {
        var maxscrollwidth = length + that.data.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
        var crentleft = that.data.marqueeDistance;
        if (crentleft < maxscrollwidth) {//判断是否滚动到最大宽度
          that.setData({
            marqueeDistance: crentleft + that.data.marqueePace
          })
        }
        else {
          //console.log("替换");
          that.setData({
            marqueeDistance: 0 // 直接重新滚动
          });
          clearInterval(interval);
          that.scrolltxt();
        }
      }, that.data.interval);
    }
    else{
      that.setData({ marquee_margin:"1000"});//只显示一条不滚动右边间距加大，防止重复显示
    } 

  },

本人QQ：993583566 ，欢迎小伙伴们共同讨论 相关知识。