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

本文介绍了一个使用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()
  }
})
完。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值