微信小程序-聊天列表-角标

<div class="list-body" bindtap=‘openChat‘ data-Obj=‘{{oitem}}‘>
        <!-- 头像 -->
        <div class=‘list-img‘>
          <div style=‘margin:10rpx 15rpx 0rpx 15rpx;display:block;‘>
            <image class=‘cst-img‘ src="{{oitem.userinfo.avatarUrl}}"></image>
          </div>

          <!-- 红点 -->
           <div style=‘vertical-align:top;line-height:16rpx;color:#ffffff;font-size:14px;background-color:red;border-radius:50%;position:absolute;bottom:86rpx;left:84rpx;text-align:center;height:18rpx; display:{{oitem.noReadCount==0 ?"none" : ""}}‘>
            <span style="color:#ffffff;font-size:20rpx;display:inline-block;text-align:center">
            {{oitem.noReadCount}}</span>
         </div>
</div>

　　注： div 不可加固定宽度，如果未读消息为两位数三位数则显示不全。

原文地址：https://www.cnblogs.com/zhangym118/p/9268954.html