开发tabbar消息提示

custom-tab-bar/index.less

@@ -1,32 +1,47 @@
 .tab-bar {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: white;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  display: flex;
+  border-top: 1rpx solid rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  padding: 14rpx 0rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
+
+  .tab-bar-item {
+    position: relative;
+    flex: 1;
+    text-align: center;
     display: flex;
-    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-    padding: 14rpx 0rpx;
-    padding-bottom: env(safe-area-inset-bottom);
-    box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
-    .tab-bar-item {
-        flex: 1;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        padding-bottom: 10rpx;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom: 10rpx;
+
+    .noticeTips {
+      position: absolute;
+      left: 146rpx;
+      top: -12rpx;
+      width: 28rpx;
+      padding: 4rpx 0rpx;
+      border-radius: 40rpx;
+      color: white;
+      font-size: 16rpx;
+      text-align: center;
+      background-color: #FF0000;
+    }
 
-        image {
-            width: 48rpx;
-            height: 48rpx;
-        }
+    image {
+      width: 48rpx;
+      height: 48rpx;
+    }
 
-        view {
-            font-size: 28rpx;
-            margin-top: 10rpx;
-        }
+    view {
+      font-size: 28rpx;
+      margin-top: 10rpx;
     }
+  }
 }

custom-tab-bar/index.wxml

@@ -1,7 +1,8 @@
 <view class="tab-bar">
-    <view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
-        bindtap="switchTab">
-        <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
-        <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
-    </view>
+  <view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}"
+    bindtap="switchTab">
+    <view class="noticeTips" wx:if="{{item.pagePath=='/pages/my/index'}}">31</view>
+    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
+    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
+  </view>
 </view>

custom-tab-bar/index.wxss

@@ -12,6 +12,7 @@
   box-shadow: rgba(0, 0, 0, 0.35) 0px 30rpx 20rpx 20rpx;
 }
 .tab-bar .tab-bar-item {
+  position: relative;
   flex: 1;
   text-align: center;
   display: flex;
@@ -20,6 +21,18 @@
   flex-direction: column;
   padding-bottom: 10rpx;
 }
+.tab-bar .tab-bar-item .noticeTips {
+  position: absolute;
+  left: 146rpx;
+  top: -12rpx;
+  width: 28rpx;
+  padding: 4rpx 0rpx;
+  border-radius: 40rpx;
+  color: white;
+  font-size: 16rpx;
+  text-align: center;
+  background-color: #FF0000;
+}
 .tab-bar .tab-bar-item image {
   width: 48rpx;
   height: 48rpx;