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

Posted 2023-02-28 托马斯大火车

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
  
)