tabbar页面动态渲染角标

app.js

@@ -43,5 +43,6 @@ App({
     account_list: [], //用户列表
     bannerDataList: [], //轮播图列表
     servicehotline: '', //客服手机号
+    msgFcount: "", //徽标数量
   }
 })

custom-tab-bar/index.js

@@ -41,7 +41,7 @@ Component({
                 iconA: '/static/tabbar-icon/message-a.png',
                 text: '消息',
                 url: '/pages/tabbar-pages/message/index',
-                fcount: ""
+                fcount: '0'
             },
             {
                 icon: '/static/tabbar-icon/user.png',
@@ -98,15 +98,10 @@ Component({
                 "method": "unReadMessageCount",
                 "content": {}
             }).then(res => {
-                console.log(res)
                 if (res.msg != '成功') console.log('未读消息数量查询失败')
-                if (res.data[0].fcount == 0) return this.setData({
-                    "tabbarList[3].fcount": ""
-                })
-                this.setData({
-                    "tabbarList[3].fcount": res.data[0].fcount
-                })
+                const fcount = (res.data[0].fcount == 0) ? '' : res.data[0].fcount;
+                getApp().globalData.msgFcount = fcount;
             })
         }
-    }
+    },
 })

pages/tabbar-pages/customer-service-staff/index.js

@@ -3,14 +3,12 @@ Page({
     /**
      * 页面的初始数据
      */
-    data: {
-    },
+    data: {},
 
     /**
      * 生命周期函数--监听页面加载
      */
-    onLoad: function (options) {
-    },
+    onLoad: function (options) {},
 
     /**
      * 生命周期函数--监听页面初次渲染完成
@@ -23,7 +21,10 @@ Page({
      * 生命周期函数--监听页面显示
      */
     onShow: function () {
-
+        this.getTabBar().init();
+        this.getTabBar().setData({
+            'tabbarList[3].fcount': getApp().globalData.msgFcount
+        })
     },
 
     /**

pages/tabbar-pages/home/index.js

@@ -68,6 +68,7 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
+        const that = this;
         /* 获取最新供需列表 */
         _Http.basic({
             "accesstoken": wx.getStorageSync('userData').token,
@@ -124,6 +125,13 @@ Page({
         this.setData({
             swiperBannerList: bannerList[0].banner
         });
+        //获取信息数量
+        this.selectComponent("#gxshuju").unReadMessageCount();
+        setTimeout(() => {
+            that.getTabBar().setData({
+                'tabbarList[3].fcount': getApp().globalData.msgFcount
+            })
+        }, 500)
     },
     /* 一键联系 */
     contact() {
@@ -144,6 +152,9 @@ Page({
      */
     onShow: function () {
         this.getTabBar().init();
+        this.getTabBar().setData({
+            'tabbarList[3].fcount': getApp().globalData.msgFcount
+        })
     },
 
     /**

pages/tabbar-pages/home/index.json

@@ -2,6 +2,7 @@
   "navigationStyle": "custom",
   "usingComponents": {
     "My_DisplayItem": "/components/My_DisplayItem/index",
-    "My_RoundedCornerButtonTabs": "/components/My_RoundedCornerButtonTabs/index"
+    "My_RoundedCornerButtonTabs": "/components/My_RoundedCornerButtonTabs/index",
+    "CusTabBar": "/custom-tab-bar/index"
   }
 }

pages/tabbar-pages/home/index.wxml

@@ -46,4 +46,7 @@
         </swiper-item>
     </swiper>
 </My_DisplayBox>
-<view style="height: 50px;"></view>
+<view style="height: 50px;"></view>
+
+<!-- 调用tabbar中的信息查询 -->
+<CusTabBar id="gxshuju"></CusTabBar>

pages/tabbar-pages/message/index.js

@@ -48,10 +48,16 @@ Page({
                 title: res.data,
             });
             const name = 'msgList[' + index + '].fisread';
-            this.selectComponent("#gxshuju").unReadMessageCount();
             this.setData({
                 [name]: 1
             })
+            //更新徽标
+            this.selectComponent("#gxshuju").unReadMessageCount();
+            setTimeout(() => {
+                this.getTabBar().setData({
+                    'tabbarList[3].fcount': getApp().globalData.msgFcount
+                })
+            }, 500)
         });
     },
     /* tabs切换 */
@@ -178,6 +184,12 @@ Page({
      */
     onShow: function () {
         this.getTabBar().init();
+        this.selectComponent("#gxshuju").unReadMessageCount();
+        setTimeout(() => {
+            this.getTabBar().setData({
+                'tabbarList[3].fcount': getApp().globalData.msgFcount
+            })
+        }, 500)
     },
 
     /**

pages/tabbar-pages/message/index.wxml

@@ -30,5 +30,5 @@
     </view>
     <My_pageReachBottom dummyStatus="{{msgList.length>0}}" loadMore='{{pageNumber>=pageTotal}}'></My_pageReachBottom>
 </scroll-view>
-
+<!-- 调用tabbar中的信息查询 -->
 <CusTabBar id="gxshuju"></CusTabBar>

pages/tabbar-pages/supplyAndDemand/index.js

@@ -83,6 +83,9 @@ Page({
                 isOnShow: true
             })
         }
+        this.getTabBar().setData({
+            'tabbarList[3].fcount': getApp().globalData.msgFcount
+        })
     },
     /* 显示沟通数量 */
     showCommunicationOfNumber() {

pages/tabbar-pages/user/index.js

@@ -134,6 +134,9 @@ Page({
             if (res.msg == '成功') return this.setData({
                 userMessage: res.data[0]
             })
+        });
+        this.getTabBar().setData({
+            'tabbarList[3].fcount': getApp().globalData.msgFcount
         })
     },