微信小程序，新添加的元素保持再底部

欢迎来前群里探讨技术QQ:454891743

点击添加按钮，新添加的元素保持在底部小demo的实现

WXML代码:

<!--index.wxml-->
<button type="primary" bindtap="addItemFn">添加</button>
<scroll-view class="scroll" scroll-y="true" scroll-top="{{scrollTop}}" >
  <view class="classname"></view>
  <block wx:for="{{lists}}" wx:key="*this">
    <view class="item" data-index="{{index}}" id="item{{index}}">item {{index}}--{{item.place}}</view>
  </block>
</scroll-view>

WXSS代码：

page{height: 100%;}
.scroll{height:400rpx; border: 2px solid #f00;}
.item{ background: #ddd; margin: 10px 0; height: 40px;}

JS代码：

//获取应用实例
var app = getApp()
Page({
  data: {
    lists: [
      { place: "北京" },
      { place: "深圳" },
      { place: "上海" },
      { place: "广州" },
      { place: "珠海" }
    ],
    //记录item个数
    itemCount: 5,
    scrollTop: 100,//设置滚动条到顶部的距离

  },
  //事件处理函数
  addItemFn: function () {
    var {lists, itemCount} = this.data;
    var newData = { place: "default" };
    lists.push(newData);
    this.setData({
      lists: lists,
      itemCount: itemCount,
    })

//单独拿出来用setData 放一个里会出现问题

    this.setData({
      scrollTop: this.data.scrollTop + 50 // 50代表你要添加的元素的高度
    })
  },
})