微信小程序，新添加的元素保持在底部
發(fā)布時間：2018-02-06 15:17 所屬欄目：小程序開發(fā)教程
點擊添加按鈕，新添加的元素保持在底部小demo的實現(xiàn)
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個數(shù) -
itemCount: 5, -
scrollTop: 100,//設置滾動條到頂部的距離 -
}, -
//事件處理函數(shù) -
addItemFn: function () { -
var {lists, itemCount} = this.data; -
var newData = { place: "default" }; -
lists.push(newData); -
this.setData({ -
lists: lists, -
itemCount: itemCount, -
})
-
//單獨拿出來用setData 放一個里會出現(xiàn)問題 -
this.setData({ -
scrollTop: this.data.scrollTop + 50 // 50代表你要添加的元素的高度 -
}) -
}, -
})
