小程序文字循环滚动效果

.js文件

Page({
    data:{  
        text: null,
        marqueePace: 1,
        marqueeDistance: 0,
        marquee_margin: 30,
        size: 14,
        interval: 20,
        textid: 0
    },
    onLoad: function () {
        var that = this;
        wx.request({
          url: `${host}api/content?table=info&num=1&recom=3`,
          success: function (res) {
            that.setData({
              text: res.data[0].title,
              textid: res.data[0].id,
            });
            let length = that.data.text.length * that.data.size;
            that.setData({
                length: length,
                windowWidth: 50
            });
            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;
        var crentleft = that.data.marqueeDistance;
        if (crentleft < maxscrollwidth) {
          that.setData({
            marqueeDistance: crentleft + that.data.marqueePace
          })
        }
        else {
          that.setData({
            marqueeDistance: 0 
          });
          clearInterval(interval);
          that.scrolltxt();
        }
      }, that.data.interval);
    }
    else {
      that.setData({ marquee_margin: "1000" });
    }
  },
});

.wxml文件

<scroll-view class="gonggao">
    <navigator url="../news/show/show?id={{textid}}">
      <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>
    </navigator>
  </scroll-view>

.wxss文件

.gonggao {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  border-left: 1px solid #ccc;
}
.scrolltxt{
  padding:0 20rpx;
  background:#F3F3F3;
}
.marquee_box {
  position:relative;
  color:#333;
  height:100rpx;
  display:block;
  overflow:hidden;
} 
.marquee_text {
  white-space: nowrap;
  position:absolute;
  top:0;
  font-size:14px;
  height: 100rpx;
  line-height:100rpx;
}