uni-app 聊天界面滚动到消息底部

目录

问题

组件

页面

使用的API

总结


问题

当你发一个消息,但是消息却需要你自己向下滑你才能看见,否则一直呗输入框挡住。

组件

scroll-view组件:一般使用scroll-view组件的都采取使用其scroll-into-view或者scroll-to属性。

scroll-top属性需要计算父容器和子容器的高度差,scroll-into-view我只能说非常难用,特别是ID这个限制,我在v-for中为每个聊天信息设置id,使用index最大的拼接出最底层消息的id,结果没有效果...

页面

javascript 复制代码
<scroll-view scroll-y="true"  
		:scroll-top="scrollTop" id="scroll" class="scroll" @tap="Extend =false "> 
			<view class="content" id="chatList">
				<view class="Chat">
					<view v-for="(item, index) in historyChat" :key="index">
					  <chat :img_path="item.imgPath" :meg="item.message" :is_robot="item.robot" class="chats"></chat>
					</view>
				</view>
			</view>
		</scroll-view>

chat是我自己封装的组件,没公布,写法可以参考我之前的文章http://t.csdnimg.cn/Di6Xo

使用的API

  • 主角:uni.pageScrollTo

这个API的描述是可以将页面滚动到目标位置(单位px)。可以指定滚动到具体的scrollTop数值,也可以指定滚动到某个元素的位置。

注意:这个滚动的位置是从页面的顶部开始计算的

  • 配角:uni.createSelectorQuery():

这个方法返回一个SelectorQuery对象实例,其通过绑定id,返回一个 NodesRef 对象实例,可以用于获取节点信息。

|---------|--------|-------------|
| id | String | 节点的 ID |
| dataset | Object | 节点的 dataset |
| left | Number | 节点的左边界坐标 |
| right | Number | 节点的右边界坐标 |
| top | Number | 节点的上边界坐标 |
| bottom | Number | 节点的下边界坐标 |
| width | Number | 节点的宽度 |
| height | Number | 节点的高度 |

NodesRef 对象带有boundingClientRect方法可以获取某个节点信息。

总结

那么思路已经很清晰了,使用uni.pageScrollTo 让滚动到目标位置(scrollTop)设置为页面的高度不就可以了?

uni.createSelectorQuery()锁定scroll-view的id,使用 NodesRef 对象返回的只有height信息

相关推荐
anOnion3 小时前
Agentic 前端开发之 实时显示 AI Agent 终端输出
前端·javascript·人工智能
这是个栗子3 小时前
【前端性能优化】优化数据加载:用 Promise.all 从串行到并行
前端·javascript·性能优化·异步编程·前端优化·promise.all
fei_sun4 小时前
黑洞路由(Null Route/空接口路由)
服务器·前端·javascript
格子软件5 小时前
2026年GEO优化系统源码的分布式状态机深度拆解
java·前端·vue.js·vue·geo
摇滚侠5 小时前
方法 A 等方法 B 执行完再执行 叫同步调用还是异步调用 JS 默认是同步调用还是异步调用
开发语言·javascript·ecmascript
格子软件6 小时前
2026年GEO优化系统源码解构:核心状态机与高并发流控深度剖析
java·vue.js·spring boot·vue·geo
触底反弹6 小时前
🔥 字符串算法面试三连击:反转、回文、回文变种,搞懂这三题稳了!
前端·javascript·算法
触底反弹6 小时前
AI Tool Use 深度解析:大模型是如何"突破物理限制"调用外部工具的?
javascript·人工智能·后端
竹林8186 小时前
从 RPC 超时到批量签名:我用 @solana/web3.js 重构了一个 NFT 铸造页面,踩了这些坑
前端·javascript
优雅格子衫7 小时前
TypeScript 类的基本使用小结
javascript·ubuntu·typescript