小程序兩種滾動公告欄的實現方法

先上效果圖：

橫向滾動欄實現：
網上的幾種方案或多或少都有一些問題：
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 id="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" style="width:{{widthrpx}}rpx" 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
    })
  },

sipwer滾動方式代碼以下所示

swiper默認爲橫向滾動，vertical爲true，則縱向滾動

// wxml
<!-- 公告 -->
<text class='swiper-notice'>公告：</text>
<swiper class='swiper-container' autoplay='true' vertical='true' circular='true' interval='2000'>
    <block wx:for='{{msgList}}'>
        <navigator url='/pages/notice/notice?title={{item.url}}' open-type='navigate'>
            <swiper-item>
                <view class='swiper-item'>{{item.title}}</view>
            </swiper-item>
        </navigator>
    </block>
</swiper>
<!-- 公告 end -->
// wxss
/* 公告start */
.swiper-notice {
  font-size: 28rpx;
  color:    #fa6016;
}

.swiper-container {
  margin-left: 10rpx;
  width: 400rpx;
  height: 100%;
}

.swiper-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2rpx;
}
/* 公告end */