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这个方法

相关推荐
优雅永不过时_v3 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue7 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂11 分钟前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷11 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户261245834016112 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js
凌览14 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣17 分钟前
JS用法:Map,Set和异步函数
前端·javascript
独立开阀者_FwtCoder35 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士35 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku43 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js