页面布局

中间显示聊天记录的地方并没有使用scroll-view（当元素过多的时候不推荐使用scroll-view会影响性能）。在APP中可以使用div代替view提高性能(一般还是用view)

滚动到底部

uni.pageScrollTo({scrollTop: 9999999999999,duration: 50
});

打开页面后滚动条会现在顶部然后再滚动到底部，如果不想要这种效果还有第二种解决方法。将整个页面翻转过来并且将内容也翻转过来(从另一个博客里看到的，不赘述)

上滑加载更多聊天记录

问题: 将新的消息插入到数组之后滚动条会自动滚动到顶部，而不是停留在刚刚的位置。

onPageScroll(e) {let scrollTop = e.scrollTop;if(scrollTop == 0){this.getMainBoxPageHeight((height)=>{console.log(`get Client Rect: ${height}`);this.pageHeight = height;});this.loadMoreHistoryMessage();}
},methods:{/*** 获取页面的高度* @param {Object} cb 回调函数，参数:height*/getMainBoxPageHeight(cb){let nodeRef = uni.createSelectorQuery().in(this).select("#chatroom-main");nodeRef.fields({size:true,},(res)=>{cb(res.height);}).exec();},
}

#chatroom-main 是该页面最顶层的容器，我们要获取到他的高度并记录下来。然后再添加数据之后再获取一次。

that.getMainBoxPageHeight((height)=>{console.log(`pageHeight after push new messages : ${height}`);let scrollHeight = height - that.pageHeight;uni.pageScrollTo({scrollTop: scrollHeight,duration: 10});
});

将获取到的历史信息插入之后再次获取，并计算需要滚动的高度，然后设置scrollTop滚动到刚刚的位置。

聊天室页面问题和解决方案相关推荐

php聊天室系统实验报告,PHP聊天室技术
1．前言上网聊天是时下最流行的交友方式.各大网站推出的聊天室都各具特色. 聊天室主要分为WebChat.BBSChat 两种.BBSChat是基于Telnet的Tcp协议,是BBS的附设功能,需要客 ...
rudesocket如何使用_[WebSocket入门]手把手搭建WebSocket多人在线聊天室（SpringBoot+WebS...
前言本文中搭建了一个简易的多人聊天室,使用了WebSocket的基础特性. 源代码来自老外的一篇好文: 本文内容摘要: 初步理解WebSocket的前后端交互逻辑手把手使用 SpringBoot ...
采用PHP实现”服务器推”技术的聊天室
传统的B/S结构的应用程序,都是采用"客户端拉"结束来实现客户端和服务器端的数据交换. 本文将通过结合Ticks(可以参看我的另外一篇文章:关于PHP你可能不知道的-PHP的事件驱 ...
【iVX 初级工程师培训教程 10篇文拿证】09 聊天室制作
目录 [iVX 初级工程师培训教程 10篇文拿证]01 了解 iVX 完成新年贺卡 [iVX 初级工程师培训教程 10篇文拿证]02 数值绑定及自适应网站制作 [iVX 初级工程师培训教程 10篇文拿 ...
Express+Socket.IO 实现简易聊天室
代码地址如下: http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: ...
用Asp.Net创建基于Ajax的聊天室程序
原作者Dahan Abdo 译自CodeProject 如要下载源代码,请到我的网站,地址:http://www.vczx.com/article/show.php?id=1796 简介我的第一个 ...
php聊天室的设计实现,基于PHP的Ajax聊天室系统的设计与实现
第7卷第20期 2007年10月167121819(2007)2025396204 科学技术与工程 Science Technol ogy and Engineering Vol .7 ...
vue php聊天室,实时聊天室：基于Laravel+Pusher+Vue通过事件广播实现
之前有说过要整理出一篇事件广播的教程,今天终于有时间把这篇文章给写了出来,本次的教程是基于Laravel+Pusher+Vue,以事件广播作为核心技术,让你可以快速搭建起一个实时聊天室应用,话不多说, ...
java jsp聊天系统_java web实现简单聊天室
目标 servlet.jsp实现简单聊天室,用户通过浏览器登录后进入聊天室,可发送消息进行群聊,点击聊天信息框中的用户名可实现拍一拍功能. 基础知识数据的存取 setAttribute / getA ...

聊天室页面问题和解决方案

页面布局

滚动到底部

上滑加载更多聊天记录

聊天室页面问题和解决方案相关推荐

最新文章

热门文章