小程序scroll-view,滚动到最低_小程序滚动到底部
目录
小程序scroll-view，滚动到最低_小程序滚动到底部
小程序scroll-view，滚动到最低_小程序滚动到底部
小程序滚动条，滚到最底部解决方案1
小程序滚动到底部使用Scorll-view实现方案:
scrill-view：组件要固定高度。
scroll-y:true
scroll-top="{ {scrollTop}}"
scroll-with-animation=“true”
每次加载新的数据修改一下scroll-top的值即可。
css代码：
.list {
border: 1px solid red;
padding: 10px;
}
.list scroll-view {
height: 350px;
}
.list .item {
padding: 20px 10px;
margin: 10px 0px;
background: rgb(224, 224, 224);
}wxml 代码：
<view class="list">
<scroll-view scroll-y="true" scroll-top="{{scrollTop}}" scroll-with-animation="true">
<view class="item" wx:for="{{list}}">{{item}}</view>
</scroll-view>
</view>js：代码
/**
* 页面的初始数据
*/
data: {
list: ['张三丰', '李四', '王五', '赵六'],
scrollTop: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
var index=0;
setInterval(() => {
index++;
var list = _this.data.list;
list.push('ceshi1');
list.push('ceshi2');
list.push('ceshi3');
list.push('**********'+index);
var top = _this.data.scrollTop + list.length * 60;
console.info(top);
_this.setData({
list: list,
scrollTop: top
});
}, 2000);
},展示效果：
更多：