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

欢迎来前群里探讨技术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代表你要添加的元素的高度 }) }, })