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

最新推荐文章于 2024-08-22 10:37:31 发布

最新推荐文章于 2024-08-22 10:37:31 发布 · 3.7k 阅读

文章标签：

#小程序 #自动滚动 #js

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用scroll-view组件实现的列表自动滚动方案。通过不断向列表中添加新元素，并调整scroll-top属性，使得列表始终保持最新内容显示在底部。适用于需要实时展示最新消息的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果如下：

关键：利用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()
  }
})

完。