WeChat applet, newly added elements remain at the bottom

Welcome to the former group to discuss technology QQ: 454891743

Click the Add button, the newly added element is kept at the bottom of the implementation of the small demo

WXML code:

<!--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 code:

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

JS code:

//get application instance
var app = getApp ()
Page({
  data: {
    lists: [
      { place: "Beijing" },
      { place: "Shenzhen" },
      { place: "Shanghai" },
      { place: "Guangzhou" },
      { place: "Zhuhai" }
    ],
    //Record the number of items
    itemCount: 5,
    scrollTop: 100,//Set the distance from the scroll bar to the top

  },
  //event handler
  addItemFn: function () {
    var {lists, itemCount} = this.data;
    var newData = { place: "default" };
    lists.push(newData);
    this.setData({
      lists: lists,
      itemCount: itemCount,
    })

//If you take it out separately and put it in one with setData, there will be problems

    this.setData({
      scrollTop: this.data.scrollTop + 50 // 50 represents the height of the element you want to add
    })
  },
})