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

Posted 2020-11-21 简一118

 

<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 不可加固定宽度，如果未读消息为两位数三位数则显示不全。