公告滚动

<view class="container">
  <view class='list' animation="{{animationData}}">
    <block wx:for="{{data}}">
    <view bindtap='bna' data-id='{{index}}'>
      {{item}}
    </view>
   </block>
  </view>
</view>

.container {
  overflow: hidden;
}
.container {
   background-color: #ccc;
  height:100rpx;
  margin:0;
padding:0;

  
}
.container {
  overflow: hidden;
}
.txt-light {
  color:#acadbe;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    data: ['1`', '2`', '3`', '4`', '5`']
  },
  bna:function(e){
    console.log(e)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    // this.util();
    this.getHeight();
  },
  util: function(obj) {
    console.log(obj);
    console.log(-obj.list);
    var continueTime = (parseInt(obj.list / obj.container) + 1) * 1500;
    var setIntervalTime = 50 + continueTime;
    var animation = wx.createAnimation({
      duration: 10, //动画时长
      timingFunction: "linear", //线性
      delay: 0 //0则不延迟
    });
    this.animation = animation;
    animation.translateY(obj.container).step({
      duration: 50,
      timingFunction: 'step-start'
    }).translateY(-obj.list).step({
      duration: continueTime
    });
    this.setData({
      animationData: animation.export()
    })
    setInterval(() => {
      animation.translateY(obj.container).step({
        duration: 50,
        timingFunction: 'step-start'
      }).translateY(-obj.list).step({
        duration: continueTime
      });
      this.setData({
        animationData: animation.export()
      })
    }, setIntervalTime)

  },
  getHeight() {
    var obj = new Object();
    //创建节点选择器
    var query = wx.createSelectorQuery();
    query.select('.container').boundingClientRect()
    query.select('.list').boundingClientRect()
    query.exec((res) => {
      obj.container = res[0].height; // 框的height
      obj.list = res[1].height; // list的height
      // return obj;
      this.util(obj);
    })
  }
})