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

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-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()
			      })
			    },

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

相关推荐
gnip9 分钟前
markdown预览自定义扩展实现
前端·javascript
G等你下课27 分钟前
AJAX请求跨域问题
前端·javascript·http
阑梦清川28 分钟前
Java后端项目前端基础Vue(二)
vue.js
爱编程的喵32 分钟前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
ITfeib33 分钟前
Flutter
开发语言·javascript·flutter
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui2 小时前
uniapp启动图被拉伸问题
uni-app
Sun_light3 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子3 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试