微信小程序scroll-view scroll-into-view显示指定的item

前端

<button bind:tap="loadData">HHH</button>
<scroll-view scroll-y scroll-into-view="{{toView}}" style="height: 500rpx;">
  <view wx:for="{{list}}" wx:key="id" id="{{'item-' + index}}">
    {{item.content}}
  </view>
</scroll-view>

模拟数据增减

data: {
    list: [], // 初始数据
    toView: '', // 滚动目标ID
},
  //模拟数据增加
loadData() {
    // 模拟数据更新（如接口请求）
    const newData = [...this.data.list, { id: Date.now(), content: '新消息:'+ this.data.list.length }];
    this.setData({
      list: newData,
      // 设置最后一个元素的ID（如 item-9）
      toView: `item-${newData.length - 1}`
    }, () => {
      // 数据更新后触发滚动（可选：延时确保DOM更新）
      setTimeout(() => this.setData({ toView: '' }), 50);
    });
  },