uniapp聊天页nvue开发踩坑记录

最新推荐文章于 2024-08-20 16:51:14 发布

睿江云计算

最新推荐文章于 2024-08-20 16:51:14 发布

阅读量723

点赞数

分类专栏：程序人生前端文章标签： html 聊天页

本文链接：https://blog.csdn.net/RJ0024/article/details/118569869

版权

本文记录了开发者在使用uniapp的nvue重构聊天页时遇到的问题及解决方案，包括页面渲染优化、白屏问题、键盘弹出与表情切换、富文本渲染以及兼容性细节等，旨在分享实战经验与技巧。

摘要由CSDN通过智能技术生成

由于前段时间开发出来的vue版本的聊天页，性能、用户体验等方面十分不尽人意，故开启了新的征途，nvue版本聊天页的开发。

痛点一、进入页面保持在最底部

这次重构nvue版本的聊天页，使用了标新立异的渲染方式。众所周知，前端渲染页面都是由上而下渲染的，那么如果需要进入页面的时候，便保持在页面的最底部，就需要等待页面渲染完毕后跳转至最底部。这样的渲染方式就会导致在进入页面时，用户能很明显的感受到页面抖动了一下（可能多次）。

所以此次重构，博主选择将整个页面旋转180度，原本的最顶部，变成了页面的最底部，进入页面无需滚动到最底，用户视角里页面会固定在底部，且渲染消息是自下而上渲染。具体css代码如下：

/* 由于nvue中不支持全部的css，需要将这段样式写进对应dom元素的style上 */
direction: rtl;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);