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

相关推荐
paopaokaka_luck2 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
一只小风华~2 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
仰望星空的凡人3 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus4 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉4 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
若梦plus5 小时前
Vue服务端渲染
前端·vue.js
Mr...Gan5 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
给力学长5 小时前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js
前端程序猿-秦祥7 小时前
uniapp中flex布局gap属性兼容处理
uni-app
楚轩努力变强7 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code