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

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

wxml

	  {{text}}  

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.setData({
      length: length,
      windowWidth: windowWidth
    });
    that.scrollFn();// 第一个字消失后立即从右边出现
  },
  scrollFn: function () {
    var that = this;
    var length = that.data.length;//滚动文字的宽度
    var windowWidth = that.data.windowWidth;//屏幕宽度
    if (length > windowWidth) {
      var interval = setInterval(function () {
        var crentleft = that.data.marqueeDistance;
        if (crentleft < 550) {//判断是否滚动到最大宽度
          that.setData({
            marqueeDistance: crentleft + that.data.marqueePace
          })
        }
        else {
          that.setData({
            marqueeDistance: 0 // 直接重新滚动
          });
          clearInterval(interval);
          that.scrollFn();
        }
      }, that.data.interval);
    }

参考链接