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

 

<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 不可加固定寬度，如果未讀消息為兩位數三位數則顯示不全。