uniapp聊天页nvue开发踩坑记录

由于前段时间开发出来的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);

<