小程序开发聊天页面

一、开发小程序

制作一个聊天界面:

1、配置页面路由:

 

 2、底部选择栏:

2、分析页面布局

 

 

写好一个大盒子之后剩下的可以for出来

最后制作消息小圆点

当新消息数为0时,不显示小圆点

判断:wx:if=”{{item.inofNum > 0 }}” 为TRUE,则显示这个view;如果显示,继续判断后面的内容(三元表达式):{{item.infoNum > 99?’99+’: item.infoNum }},如果item.infoNum的值大于99为TRUE,则先显示第一个即99+,否则显示item.infoNum原本的值。

最后设置当变成“99+”时,变成 “smallText”class里的样式

这样一个聊天界面就写完了。

posted @ 2022-03-20 15:07  小小小侠  阅读(1372)  评论(0编辑  收藏  举报