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

相关推荐
疯狂踩坑人13 分钟前
【万字长文】让面试没有难撕的JS基础题
javascript·面试
游戏开发爱好者81 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
极客小俊1 小时前
【浅谈javascript禁术】 eval函数暗藏玄机?
javascript
533_1 小时前
[element-plus] el-select 下拉选择图片
vue.js
李明卫杭州1 小时前
详细讲解js中的ResizeObserver
前端·javascript
千叶寻-2 小时前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
小*-^-*九2 小时前
Electron vue项目 打包 exe文件2
javascript·vue.js·electron
zhengjianyang&1232 小时前
美团滑块-[behavior] 加密分析
javascript·经验分享·爬虫·算法·node.js
weixin_439647793 小时前
JavaScript性能优化实战:从指标到落地的全链路方案
开发语言·javascript·性能优化
郑州光合科技余经理3 小时前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app