当前位置：首页 > news >正文

vue和uniapp聊天页面右侧滚动条自动到底部

news 来源：原创 2025/6/7 14:44:48

1.vue右侧滚动条自动到底部

          <div ref="newMessage1"></div> <!-- 定义<div ref="newMessage1"></div>与<div v-for=”item in list“>循环同级定义-->

定义方法

                scrollToBottomCenter(){this.$nextTick(() => {this.$refs.newMessage1.scrollIntoView({ behavior: 'smooth' });});},

在push到list数组内高度变化是调用scrollToBottomCenter这个方法

2.uniapp右侧滚动条自动到底部

		<view class="" ><scroll-viewstyle="height: 81vh;"class="chat-messages"scroll-yid="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()})},

在push到alllist高度变化时调用scrollToBottom这个方法