vue和uniapp聊天页面右侧滚动条自动到底部
adminuniapp右侧滚动条自动到底部
<view class="" >
<scroll-view
style="height: 81vh;"
class="chat-messages"
scroll-y
id="chatMessages"
enable-flex
@scrolltolower="scrollToBottom"
:scroll-top="scrollTop"
scroll-with-animation="true"
>
<view class="all" v-for="item in allList">
..............
</view>
</scroll-view>
在data中定义
data() {
return {
scrollTop: 0,
}
},
定义方法
scrollToBottom() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select('#chatMessages').fields({
id: true,
dataset: true,
rect: true, // 获取布局信息
size: true, // 获取宽高
scrollOffset: true, // 获取滚动信息
scrollHeight: true,
}, (res) => {
// console.log('完整节点信息:', res)
if (res && res.scrollHeight) {
this.scrollTop = res.scrollHeight
// console.log('设置成功 scrollTop:', this.scrollTop)
} else {
console.warn('未获取到有效滚动信息', res)
}
}).exec()
})
},
本文由 我爱PHP169 作者：admin 发表，其版权均为 我爱PHP169 所有，文章内容系作者个人观点，不代表 我爱PHP169 对观点赞同或支持。如需转载，请注明文章来源。
