微信小程序收到新消息的小红点实现

wxml：主要实现了小于等于99显示原数字，大于99显示99+

wx:if="{{like_num<=99}}"和
wx:else

即：
<view class="red_circle" wx:if="{{like_num<=99}}">{{like_num}}</view>
<view class="red_circle" wx:else>99+</view>

<view id="whole">
    <view id="center_box">
        <view id="like_box" bindtap="like_btn">
            <view class="img_div">
                <view class="red_circle" wx:if="{{like_num<=99}}">{{like_num}}</view>
                <view class="red_circle" wx:else>99+</view>
                <image class="front_pic" src="../../icon/mine/xiaoxi1.png" alt="" />
            </view>
            <view class="text_div">收到的赞</view>
            <view class="img_div">
                <image class="after_pic" src="../../icon/mine/jiantou.png" alt="" />
            </view>
        </view>
        <view id="note_box" bindtap="dairy_btn">
            <view class="img_div">
                <view class="red_circle" wx:if="{{comment_num<=99}}">{{comment_num}}</view>
                <view class="red_circle" wx:else>99+</view>
                <image class="front_pic" src="../../icon/mine/xiaoxi2.png" alt="" />
            </view>
            <view class="text_div">收到的评论</view>
            <view class="img_div">
                <image class="after_pic" src="../../icon/mine/jiantou.png" alt="" />
            </view>
        </view>
        <view id="test_box" bindtap="scale_btn">
            <view class="img_div">
                <view class="red_circle" wx:if="{{system_num<=99}}">{{system_num}}</view>
                <view class="red_circle" wx:else>99+</view>
                <image class="front_pic" src="../../icon/mine/xiaoxi3.png" alt="" />
            </view>
            <view class="text_div">系统消息</view>
            <view class="img_div">
                <image class="after_pic" src="../../icon/mine/jiantou.png" alt="" />
            </view>
        </view>
    </view>
</view>

wxss：主要实现了小红点的定位

父标签position:relative
子标签（小红点所在标签）position:absolute

即：
父标签img_div

.img_div {
  position: relative;
}

子标签red_circle

.red_circle {

  position: absolute;
  right: -15rpx;
  top: -15rpx;/*这三行是定位*/
  
  width: 45rpx;
  height: 45rpx;
  border-radius: 50%;
  background-color: red;/*这四行是圆形红点*/
  
  line-height: 45rpx;/*数字垂直居中*/
  font-size: 20rpx;
  text-align: center;/*数字水平居中*/
  color: white;
}

#whole {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #f6f6f6;
}
#center_box > view {
  background-color: white;
  display: flex;
  height: 168rpx;
  margin-bottom: 25rpx;
}
.red_circle {
  position: absolute;
  right: -15rpx;
  top: -15rpx;
  width: 45rpx;
  height: 45rpx;
  line-height: 45rpx;
  font-size: 20rpx;
  text-align: center;
  border-radius: 50%;
  background-color: red;
  color: white;
}

.img_div {
  position: relative;
  margin: auto 15px;
}
.text_div {
  margin: auto auto auto 20px;
  font-size: 35rpx;
}
.front_pic {
  width: 55px;
  height: 55px;
}
.after_pic {
  float: right;
  width: 13px;
  height: 25px;
  margin-right: 30rpx;
}

js：主要实现传参

Page({
  data: {
    like_num:7,
    comment_num:102,
    system_num:3
  }
})