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

news2024/9/21 3:24:07

目录

问题

组件

页面

使用的API

总结


问题

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

组件

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

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

页面

<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 对象实例,可以用于获取节点信息。

idString节点的 ID
datasetObject节点的 dataset
leftNumber节点的左边界坐标
rightNumber节点的右边界坐标
topNumber节点的上边界坐标
bottomNumber节点的下边界坐标
widthNumber节点的宽度
heightNumber节点的高度

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

总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2135529.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring3-IoC1-IoC容器、基于xml管理bean

目录 IoC容器 概述 依赖注入 IoC容器在Spring中的实现 基于xml管理bean 获取bean 依赖注入 setter注入 构造器注入 特殊值处理 字面量赋值 null值 xml实体 CDATA节 特殊类型属性注入 对象类型属性注入 方式一&#xff1a;引用外部bean 方式二&#xff1a;内部…

设背包密码系统的超递增序列为A=(3,4,9,17,35),乘数t=19,模数k=73,试对good night加密

PS:后续在此基础上更新Java代码 1.超递增序列含义 超递增序列是指一个正整数序列&#xff0c;其中每个元素a[i]&#xff08;i≥2&#xff09;都大于它前面所有元素之和&#xff0c;即a[i] > &#xff08;a[1] a[2] ... a[i-1]&#xff09; 2.加密公式 C&#xff08; B…

html+css+js网页设计 旅游 大理旅游7个页面

htmlcssjs网页设计 旅游 大理旅游7个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…

信通院发布首个《大模型媒体生产与处理》标准,阿里云智能媒体服务作为业界首家“卓越级”通过

中国信通院近期正式发布《大模型驱动的媒体生产与处理》标准&#xff0c;阿里云智能媒体服务&#xff0c;以“首批首家”通过卓越级评估&#xff0c;并在9大模块50余项测评中表现为“满分”。 当下&#xff0c;AI大模型的快速发展带动了爆发式的海量AI运用&#xff0c;这其中&a…

异构仿真:打造更可靠的综合化航空电子软件

综合化航空电子系统是一类典型的安全关键系统&#xff0c;具有分布式、异构、计算资源和物理资源强耦合等特征。随着IMA&#xff08;Integrated Modular Avionics&#xff0c;综合模块化航空电子&#xff09;系统趋于复杂化和智能化&#xff0c;系统的功能越来越多地采用软件来…

权威认可,信源信息再次斩获国家发明专利

近日&#xff0c;郑州信源信息技术股份有限公司&#xff08;简称“信源信息”&#xff09;继获得“一种安全认证方法及系统”发明专利后&#xff0c;再次喜获国家知识产权局颁发的发明专利“适用于多环境OFD文档的投标文件处理方法及系统”。本次发明专利的获得&#xff0c;不仅…

华为云ROMA Connect聚焦创新,在Gartner®峰会发布智能集成新视角

9月9日-9月10日&#xff0c;Gartner全球应用创新及商业解决方案峰会在伦敦举行&#xff0c;围绕企业应用策略、智能平台工程和生成式AI&#xff0c;来自全球的1700业内专家共同探讨新趋势带来的机遇和挑战。华为云ROMA Connect发表 “人工智能”主题演讲之一&#xff0c;展现新…

黑龙江等保测评二级系统费用解析:如何合理预算?

在信息安全日益受到重视的今天&#xff0c;等保测评成为企业合规的重要环节。尤其是在黑龙江&#xff0c;随着网络安全法的实施&#xff0c;越来越多的企业开始关注等保测评的相关费用。那么&#xff0c;黑龙江等保测评二级系统的费用是如何计算的呢&#xff1f; 首先&#xf…

linux 定时将固态硬盘数据备份至机械硬盘

需求背景 为了加强公司数据的安全性和可靠性&#xff0c;我们将实施一项数据备份策略。该策略涉及将服务器上的固态硬盘&#xff08;SSD&#xff09;中的关键数据定期备份到机械硬盘&#xff08;HDD&#xff09;上。这一过程旨在保护数据免受意外删除、硬件故障或其他潜在风险…

【诉讼流程-健身房-违约认定-私教课-诉讼书前提材料整理-民事诉讼-自我学习-铺平通往法律的阶梯-讲解(2)】

【诉讼流程-健身房-违约-私教课-前期法律流程-民事诉讼-自我学习-铺平通往法律的阶梯-讲解&#xff08;2&#xff09;】 &#xff08;1&#xff09;前言说明1、目的2、一个小测试1、更换原教练2、频繁更换教练3、上课估计拖课&#xff0c;占用上课时间&#xff0c;抽烟等。4、以…

VMware Workstation Pro 17 提供个人版使用

说明 VMware 下载链接已经合并到博通网站&#xff0c;原有网站已停用。 注册 注册并登录博通网站&#xff0c;即可下载软件&#xff0c;不过注册有很多限制 建议使用国外的邮箱。 我是用gmail注册的。 下载 https://support.broadcom.com/group/ecx/productdownloads?subf…

JavaScript 基础 - 第16天_AJAX入门

文章目录 Day01_Ajax入门目录学习目标01.AJAX 概念和 axios 使用目标讲解小结 02.认识 URL目标讲解小结 03.URL 查询参数目标讲解小结 04.案例-查询-地区列表目标讲解小结 05.常用请求方法和数据提交目标讲解小结 06.axios 错误处理目标讲解小结 07.HTTP 协议-请求报文目标讲解…

iOS 知识点记录

王巍 博客地址&#xff1a;OneVs Den git地址&#xff1a;onevcat (Wei Wang) GitHub 江湖人称喵神&#xff0c;目前就职于line。喵神的博客涉及方面比较广, 有Obejctive-C, Swift, SwiftUI, Unity等等。博客内容很有深度&#xff0c;非常值得关注。 戴铭 博客地址&#xff1…

Springboot项目打war包运行及错误解决

一,打war包 1. 修改pom.xml 为了不影响原pom.xml, 我复制了一个文件叫pom_war.xml , 需要打war包就采用pom_war.xml进行打war包, 你也可以直接修改pom.xml ① 打包方式改为war 没有就增加此配置 <packaging>war</packaging> ② 排除内嵌tomcat依赖 <de…

Android Studio 安装2022版稳定版 2022.3.1 详细操作(带图展示)

一、先规范好文件地址 分别创建文件夹Android_SDK和AndroidStudio用来放置SDK与软件 特别注意&#xff1a;文件夹不要出现空格与中文&#xff0c;且文件夹都为空 二、下载android studio &#xff08;1&#xff09;点开下载网页 https://developer.android.google.cn/studi…

定时任务和延时任务

目录 一、延时任务 2.at任务的黑白名单 二、定时任务 1.系统定时任务 三、系统中临时文件的管理方式 一、延时任务 [rootlocalhost ~]# at 23:37 ##设定任务执行时间 at> rm -fr /mnt/* ##任务动作 at> << CTRL D ##用ctrlD发起任务 [rootlocalhost ~]# at no…

36岁,大厂女程序员,中年失业后,我开始接受自己的平凡,并深耕自己

作为80后秦岭大山里面的穷苦农民工家的孩子&#xff0c;从小因为讨厌做家务&#xff0c;做农活&#xff0c;而且家里孩子众多&#xff0c;物质匮乏&#xff0c;从小就特别渴望走出大山。 上学的时候&#xff0c;通过刻苦努力&#xff0c;成绩也还算可以&#xff0c;经常受到老师…

系统架构设计师教程 第5章 5.1 软件工程 笔记

5.1 软件工程 ★★★★☆ 5.1.1 软件工程定义 软件工程过程是指为获得软件产品&#xff0c;在软件工具的支持下由软件工程师完成的一系列软件工程活动&#xff0c;包括以下4个方面。 (1)P(Plan)——软件规格说明。规定软件的功能及其运行时的限制。 (2)D(Do) — —软件开发。开…

成功晋级 | 3本ELSEVIER期刊正式被ESCI收录,最快的录用后2天即可出版

爱思唯尔&#xff08;ELSEVIER&#xff09;作为一家国际顶尖出版集团&#xff0c;自1880年创办以来&#xff0c;旗下出版期刊有2800多种&#xff0c;其中包含《柳叶刀》《细胞》等TOP期刊&#xff0c;在学术科研界享誉盛名。 根据八月份公布的最新SCI目录显示&#xff0c;ELSE…

基于单片机的水情监测站设计

本设计以STM32单片机为控制核心&#xff0c;利用DS18B20温度检测模块&#xff0c;TSW-30浊度传感器&#xff0c;PH值传感器&#xff0c;完成对水环境温度&#xff0c;水浊度&#xff0c;PH值的检测。系统使用OLED12864作为系统显示模块&#xff0c;使用WiFi模块来实现对监测数据…