【uni-app】uni-app实现聊天页面功能（小程序）——布局篇

---

前言

在工作中使用uni-app参与开发一个小程序，其中要写一个简单的聊天页面，虽然功能不多（只有一个发送文字的功能），但是其中的细节比较多，也踩过很多坑，特此记录下来。要实现的页面如图所示，该篇主要讲讲如何布局（参考了很多文章之后根据页面需求进行一个整合）。

划分区域

先划分大区域，主要包含两个（顶部导航栏用的小程序自带的，所以就没有自己写，后续有需求可能会自定义导航栏）聊天内容区和底部发送框。

其中因为要实现发送内容页面会自动滚到最底部，所以聊天内容区在布局上是采用了scroll-view,必须要给它设置一个基础的高度（这里设置为屏幕的高度），而聊天消息列表的高度是根据内容来撑开。

注意！底部聊天框是采用固定定位固定在页面的底部，它不遵循标准流，当聊天内容充满整个屏幕时，最底部的消息会被聊天框遮挡，为了避免这种情况发生，需要在聊天框外再套一层有固定高度的view来占位。

问题

内容溢出

而实际测试时还发现了一个问题：连续的数字会溢出内容框！

因为连续的数字被浏览器误认为是英文单词，而英文单词在默认情况下是不会分开换行的，解决方案是在css内容框中加入如下代码（二选一即可）：

//写法一word-wrap: break-word;//写法二word-break: break-all;

这样就解决了！

关于调试聊天框

小程序模拟器和真机上在聊天框中会略微有点差别！！！
（我设置了padding，模拟器上文字是贴着，但真机上文字居中）

模拟器：

真机：

代码实现

下面是整个页面的完整代码（已更新）：

具体功能实现将放在下篇（可能一篇讲不完），有任何问题可以评论留言~

来源地址：https://blog.csdn.net/qq_51250105/article/details/130084841