微信小程序：19.TabBar 红点提醒解决方案

TabBar 红点提醒，很多小程序都需要这个功能比如聊天小程序，电商小程序等
这时候我们需要进行自定义 TabBar

配置信息

更改 custom 为 True 变为自定义 Tabbar

{
   
  "pages": [
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
   
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "usingComponents": {
   
    "van-button": "@vant/weapp/button/index",
    "my-numbers": "./components/numbers/numbers"
  },
  "tabBar": {
   
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "list": [{
   
      "pagePath": "pages/home/home",
      "text": "组件"
    }, {
   
      "pagePath": "pages/index/index",
      "text": "接口"
    }]
  }
}

配置好后你会发现没有出现 Tabbar 这个是正常的

添加代码文件

在跟目录中创建文件夹和组件结构