小程序横向无限滚动公告广播

效果图：

wxml代码

 <!-- 广播 -->
  <view class='notice'>
      <view class="left-box">
        <view class="left-text">
          <image src="/assets/annou.png" style="width: 40rpx;height: 40rpx;"></image>
        </view>
        <view class='content-box'>
          <view class='content-text' animation="{{animationData}}"><text id="text">{{text}}</text></view>
        </view>
        <view class="right-text"></view>
      </view>
  </view>
</view>

js代码

Page({
  data: {
    // 广播
    text: "1.【评分标准】页可以查看不同年龄段的评分标准，通过首页选择对应的性别、类别和年龄。2.【单项成绩】页包含了详细的单项打分情况及成绩雷达图，直观地看出自己的弱项和强项。",
    animation: null,
    timer: null,
    duration: 0,
    textWidth: 0,
    wrapWidth: 0,


  },
  onShow() {
    this.initAnimation(this.data.text);//关掉广播
  },
  onHide() {
    //关掉广播
    this.destroyTimer();
    this.setData({
      timer: null
    })
  },
  onUnload() {
    //关掉广播
    this.destroyTimer()
    this.setData({
      timer: null
    })
  },
  //卸载定时器
  destroyTimer() {
    if (this.data.timer) {
      clearTimeout(this.data.timer);
    }
  },
  //开启公告字幕滚动动画
  initAnimation() {
    let that = this
    this.data.duration = 15000
    this.data.animation = wx.createAnimation({
      duration: this.data.duration,
      timingFunction: 'linear'   
    })
    let query = wx.createSelectorQuery()
    query.select('.content-box').boundingClientRect()
    query.select('#text').boundingClientRect()
    query.exec((rect) => {
      that.setData({
        wrapWidth: rect[0].width,
        textWidth: rect[1].width
      }, () => {
        this.startAnimation()
      })
    })
  },
  // 定时器动画
  startAnimation() {
    const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({ duration: 0 })
    this.setData({
      animationData: resetAnimation.export()
    })
    const animationData = this.data.animation.translateX(-this.data.textWidth).step({ duration: this.data.duration })
    setTimeout(() => {
      this.setData({
        animationData: animationData.export()
      })
    }, 100)
    const timer = setTimeout(() => {
      this.startAnimation()
    }, this.data.duration)
    this.setData({
      timer
    })
  },
})

wxss代码

/* 广播 */
.notice {
  position: relative;
  width: 100%;
  margin-top: 60rpx;
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 10rpx 25rpx;
  background: #f1f1f1;
}
.left-box {
  position: relative;
  width:100%;
  display: flex;
  align-items: center;
}
.left-text {
  position: absolute;
  left: 0;
  width: 40rpx;
  height: 100%;
  background: #f1f1f1;
  z-index: 99;
}
.right-text {
  position: absolute;
  right: -1rpx;
  width: 40rpx;
  height: 100%;
  background: linear-gradient(to left,rgba(241,241,241,1),rgba(241,241,241,0));
  z-index: 99;
}
.content-box {
  overflow: hidden;
  width: calc(100% - 60rpx);
}
.content-text {
  color: #5e5e5e;
  white-space: nowrap;
  font-size: 28rpx;
}