uniapp小程序自定义动态tabbar在他有数字显示在其图标后

在uniApp小程序中，如果你想要实现自定义动态TabBar并在每个选项的图标后面显示数字，你可以通过`navigator.tabBar` API 和 `setData` 方法来完成这个功能。首先，你需要在`pages.json`文件中配置每个页面对应的一个 tabBar 上下文，并在对应的 WXML 文件里设置 TabBar 的样式。

1. 配置`pages.json`：

{
  "tabBar": {
    "custom": true,
    "color": "#fff",
    "selectedColor": "#f00",
    "list": [
      {
        "pagePath": "index/index",
        "text": "首页",
        "iconPath": "path-to-icon-home.png", // 这里可以添加动态数值的显示格式，如："home_{{count}}.png"
        "selectedIconPath": "home_selected.png",
        "badgeText": "99", // 显示数字的位置，默认在图标右侧
        " badgeValue": "99" // 当数字变化时，这里需要更新
      },
      ...
    ]
  }
}

在这个配置中，`badgeText` 属性用于显示文本标签（数字），而 `badgeValue` 是实际的数值，需要你在相应页面的逻辑中更新。

2. 更新数据并渲染：
在需要显示动态数目的页面中，比如 `index.js` 或者全局的数据管理模块，当数据发生变化时，你需要调用 `uni.setStorageSync('tabBarBadge', { count: 新的数值 })` 来存储新的值，并在适当的时机更新 `badgeValue`：

Page({
  data: {
    count: 0, // 初始值
  },
  updateCount(newCount) {
    uni.setStorageSync('tabBarBadge', { count: newCount });
    this.setData({ count: newCount });
  },
  ...其他页面逻辑...
})

每当你想改变数字时，只需调用 `updateCount()` 函数并将新的计数值作为参数传入。