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

相关推荐
JA+几秒前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js
那年窗外下的雪.11 分钟前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
00后程序员张31 分钟前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_9160088934 分钟前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos
2501_9159184134 分钟前
App 使用 HTTPS 的工程化实战,从接入到真机排查的一线指南
android·ios·小程序·https·uni-app·iphone·webview
Rysxt_40 分钟前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
似水流年QC41 分钟前
Electron 实战|Vue 桌面端开发从入门到上线
vue.js·electron·桌面端
前端架构师-老李44 分钟前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据1 小时前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax
Rysxt_1 小时前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron