拆了3个， 打字的 ， 聊天item ， 聊天list 。大概就这样了。
其中 聊天list 用了一个better-scroll这个第三方插件。
首先第一步就是开发这个 聊天item
分析一下需求，别人发过来的和我们发过去的是两个排版和样式，但是不用单独写两个，用个逻辑区分一下就可以了，也可以动态绑定css什么的差别很小。
这个是只有1边的，逻辑就是在消息那边加个v-if，判断来源，也可以动态绑定css
弄好以后就这样
个人觉得css还是比较重要的，这里用了sass来写。主要解决方案就是用一个display:flex配合上flex-direction: row-reverse让头像和消息左右排列
这个是没有调样式的，只是为了自己嗨弄的，可能会很丑。
最后大概就是这样的咯
下一篇 （2）点这里
结合css技术很容易实现先用css讲菜单按照你需要的样式布局好，接着你可以按照不同的方式来编写如何切换内容，这里讲两种方法
一。比如你的菜单有四个，那么在同一个页面上你同时做好这四个菜单的显示内容，讲其余三个的display属性设置为none，剩下的一个display设为block（即是你载入程序时希望默认打开的部分），然后每当点击各个菜单显示不同内容就用js代码控制这四个板块的display属性就可以了。
二。你还可以在菜单项下面布局一个iframe，然后讲四个板块做成四个独立的页面，每点击一个菜单项的时候载入不同的页面就可以了
您好，要更改聊天框前面的时间颜色，需要打开wlk的源代码，找到time.css文件，打开文件，修改里面的.time-stamp元素的color属性，即可更改聊天框前面的时间颜色。另外，您也可以在time.css文件中添加新的样式，以满足您的特殊需求。
