微信小程序未读消息右上角红点数字显示

Reset0x0

已于 2024-03-11 17:51:45 修改

阅读量8k

点赞数 9

文章标签：微信小程序小程序

于 2020-11-14 11:41:43 首次发布

本文链接：https://blog.csdn.net/weixin_45920920/article/details/109688417

版权

本文介绍了如何在微信小程序中实现未读消息的右上角红点数字显示，当消息数量小于等于99时显示具体数字，超过99则显示99+。通过wx:if条件渲染完成此功能，并提供了wxml、wxss和js的相关代码段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从weui中获得灵感，稍微改造，效果还不错
在消息数量为1-99时正常显示即可，而大于99时显示99+。使用wx:if搞定

wxml部分：

 <view class="buttom">

    <view class="but_list" wx:for="{
    {listt}}" wx:key="*this">

      <image src="{
    {item.img}}"></image>

      <text>{
  {item.tet}}</text

最低0.47元/天解锁文章