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

来源：互联网发布：mac os beta版编辑：程序博客网时间：2024/06/10 12:33

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

0 0