小程序实现【自动滚动信息栏】

需求：列表不断获取最新信息，加入列表并自动滚动到底部

效果如下：

关键：利用scroll-view控件，控制scroll-top达到自动滚动的效果

wxml:

<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view scroll-y style="height: 200px;"  scroll-top="{{scrollTop}}">
    <view style="height:30px;" wx:for="{{list}}" wx:key="a">{{item}}</view>
  </scroll-view>
</view>
<button bindtap="start">start</button>

js:

var j = 0
var that 
Page({
  data: {
    scrollTop: 220,
    list: [0,1,2,2,2,2,2,3,6,6,6]
  },
  onLoad: function() {
    that = this
    var i = 0;  //用来控制增加量
    var timer = setInterval.call(this,()=>{
      // 控制增加量
      i++
      if (i > 99){ 
        clearInterval(timer) 
      }
      // 往数组push元素，并增加偏移量
      var list = this.data.list
      list.push(j++)                                                                                                                 
      this.setData({list:list,scrollTop:this.data.scrollTop+30})
    },1)
  },
  start: () => {
    that.onLoad()
  }
})

完。