uniapp聊天页nvue开发踩坑记录

本文记录了开发者在使用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);

<

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值