微信小程序自动滚动到最底部
·
1.使用scroll-view 添加 scroll-y="true" scroll-top="{{scrollTop}}"
wxml页面
<scroll-view scroll-y="true" class="message-list" scroll-top="{{scrollTop}}">
</scroll-view>
css页面 设置高度
.message-list {
max-height: 76vh;
}
js页面
Page({
/**
* 页面的初始数据
*/
data: {
scrollTop: 0,
},
//自动滚动
autoScroll() {
wx.createSelectorQuery().select('.message-list').boundingClientRect(res => {
this.setData({
scrollTop: res.height * 100 // 乘以100是为了确保效果明显,实际高度可能需要调整
});
}).exec();
},
//在js页面,在需要的地方获取到数据之后执行
//自动滚动 // 每次文本变更时调用,重定位到底部
this.autoScroll(); // 调用自动滚动到底部的函数
})
更多推荐

所有评论(0)