本文主要講的是無限循環左右滾動的公告

先上效果圖

原理是設置公告的左移距離，不斷減小，當左移距離大于公告長度（即公告已移出屏幕），重新循環。
下面將代碼貼上：

<view class='notice-wrap' hidden='{{hideNotice}}'>
  <view class='notice ovh font28 relative'>
    <view class="marquee_text" style="left:{{marqueeDistance}}px;">
      {{notice}}
    </view>
  </view>
  <image bindtap='switchNotice' src='../../imgs/close-white.png' class='close-icon icon40 right icon'></image>
</view>

CSS樣式需根據自己的頁面調整一下位置

.notice-wrap{background:#FF3766;padding:10rpx 70rpx 10rpx 0;height:50rpx;}
.ovh{overflow:hidden}
.font28{font-size:28rpx}
.relative{position:relative}
.notice{color:#fff;width:100%;height:40rpx;}
.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 0;
}
.close-icon{position:absolute;right:15rpx;top:114rpx;}
.icon40{width:40rpx;height:40rpx;}   
.right{float:right}
.icon{display:inline-block;width:32rpx;height:32rpx;background-size:contain;}

    //初始化數據
    hideNotice: false,
    notice: '哈哈哈哈哈哈，我是滾動的公告，快來抓我呀~',
    marqueePace: 1,//滾動速度
    marqueeDistance: 10,//初始滾動距離
    size: 12,
    interval: 20, // 時間間隔
    countTime: ''

  onLoad: function() {
   let data = {},that = this;
    var length = that.data.notice.length * that.data.size; //文字長度
    var windowWidth = wx.getSystemInfoSync().windowWidth; // 屏幕寬度
    that.setData({length,windowWidth});
    that.setData({
      marqueeDistance: windowWidth
    });
    that.run1();
  },

  run1: function () {
    var that = this;
    that.data.countTime = setInterval(function () {
      if (-that.data.marqueeDistance < that.data.length) {
        that.setData({
          marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
        });
      } else {
        clearInterval(that.data.countTime);
        that.setData({
          marqueeDistance: that.data.windowWidth
        });
        that.run1();
      }
    }, that.data.interval);
  },
})