先上效果图：

横向滚动栏实现：
网上的几种方案或多或少都有一些问题：
1.setData定时器更新text view的margin-left方法，由于setData的毫秒延时，动画播放起来一卡一卡；
2.纯CSS实现，keyframe等，无法实现循环播放的设置；
3.使用string.length*font-size的方法获取字符串像素长度，不够精确，多次循环播放后误差会累积变大。
我采用的animate动画方法，实测动画流畅，循环播放无误差。

横向滚动代码如下所示

// wxml<view class='notice'> <view class="left">  <text class='iconfont icon-labagonggao voice'></text>   <view class="left-box">    <view class="left-text"></view>    <view class='content-box'>     <view class='content-text' animation="{{animationData}}"><text >{{text}}</text></view>    </view>    <view class="right-text"></view>   </view> </view> <view class="right" bindtap="goApp">  <!-- <image class="app" mode="aspectFit" src="/assets/images/app.png"  bindload="imageLoad"></image> -->  <text class="more">更多应用></text> </view></view>// wxss.notice { display: flex; align-content: center; justify-content: space-between; padding: 10rpx 25rpx; background: #f1f1f1;}.left { display: flex; align-items: center;}.voice { margin-right: 5rpx; margin-top: 2rpx; color: #fa6016;}.left-box { position: relative; display: flex; align-items: center;}.left-text { position: absolute; left: 0; width: 40rpx; height: 100%; background: linear-gradient(to left,rgba(241,241,241,0),rgba(241,241,241,1)); 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: 350rpx;}.content-text { color: #5e5e5e; white-space: nowrap; font-size: 28rpx;}.right { display: flex; align-items: center;}.app { height: 48rpx;}.more { margin-left: 5rpx; color: #aaa; font-size: 32rpx;}// js 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);  } }, /**  * 开启公告字幕滚动动画  * @param {String} text 公告内容  * @return {[type]}   */ initAnimation(text) {  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() {  //reset  // this.data.animation.option.transition.duration = 0  const resetAnimation = this.data.animation.translateX(this.data.wrapWidth).step({ duration: 0 })  this.setData({   animationData: resetAnimation.export()  })  // this.data.animation.option.transition.duration = this.data.duration  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  }) },