微信小程序使用vant-weapp自定义tabbar已经设置小红点--官方设置示例

1、vant-weapp组件版

1.首先在根目录(pages同级目录)建立 custom-tab-bar 文件夹  包含 index.js  index.json index.wxml

Component({
  data: {
     // 选中的 tab 
    active: 0,
    // 菜单列表
    list: [{
        "url": "/pages/index/index",//地址
        "icon": "wap-home-o",//图标
        "info": '',//小红点
        "text": "首页"
      },
      {
        "url": "/pages/news/index",
        "icon": "chat-o",
        "info": '3',
        "text": "消息"
      },
      {
        "url": "/pages/mine/index",
        "icon": "user-o",
        "info": '',
        "text": "我的"
      }
    ]
  },
  methods: {
    onChange(e) {
      console.log(e, 'e')
      this.setData({
        active: e.detail
      });
      wx.switchTab({
        url: this.data.list[e.detail].url
      });
    },
    init() {
      const page = getCurrentPages().pop();
      this.setData({
        active: this.data.list.findIndex(item => item.url === `/${page.route}`)
      });
    }
  }
});

// console.log('首页')
// this.getTabBar().init();

index.json文件

{
    "component": true,
    "usingComponents": {
        "van-tabbar": "@vant/weapp/tabbar/index",
      "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "van-icon": "@vant/weapp/icon/index"
    }
}

index.wxml文件

<van-tabbar active="{{ active }}" bind:change="onChange" class="tabber">
  <van-tabbar-item wx:for="{{ list }}" info="{{item.info}}" wx:key="index" icon="{{ item.icon }}">{{
    item.text
  }}</van-tabbar-item>
</van-tabbar>
<!-- 
<van-tabbar-item data-path="/pages/index/index">
    <image
      slot="icon"
      src="/images/home.png"
      mode="aspectFit"
      style="width: 36px; height: 24px;"
    />
    <image
      slot="icon-active"
      src="/images/home_h.png"
      mode="aspectFit"
      style="width: 36px; height: 24px;"
    />
    首页
  </van-tabbar-item>
  <van-tabbar-item data-path="/pages/news/index" info="3">
    <image
      slot="icon"
      src="/images/message.png"
      mode="aspectFit"
      style="width: 36px; height: 24px;"
    />
    <image
      slot="icon-active"
      src="/images/message_h.png"
      mode="aspectFit"
      style="width: 36px; height: 24px;"
    />
    消息
  </van-tabbar-item>
  <van-tabbar-item data-path="/pages/mine/index">
    <image
      slot="icon"
      src="/images/mine.png"
      mode="aspectFit"
      style="width: 36px; height: 24px;"
    />
    <image
      slot="icon-active"
      src="/images/mine_h.png"
      mode="aspectFit"
      style="width: 36px; height: 24px;"
    />
    我的
  </van-tabbar-item>
</van-tabbar> -->

生命周期函数--监听页面显示 在每个tabbar页面onshow 调用即可;

onShow: function () { 
    console.log('个人中心')；
    this.getTabBar().init();
},

 app.json文件

{
  "pages": [
    "pages/index/index",
    "pages/login/client",
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom",
    "enablePullDownRefresh": true
  },
  "usingComponents": {
   
  },
  "tabBar": {
    "custom": true,
    "position": "bottom",
    "borderStyle": "white",
    "color": "#666666",
    "selectedColor": "#2861F0",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home_h.png"
      },
      {
        "pagePath": "pages/news/index",
        "text": "消息",
        "iconPath": "/images/message.png",
        "selectedIconPath": "/images/message_h.png"
      },
      {
        "pagePath": "pages/mine/index",
        "text": "我的",
        "iconPath": "/images/mine.png",
        "selectedIconPath": "/images/mine_h.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

2、官方示例版

微信官方提供的原生设置tabbar上设置小红点api

代码片段：https://developers.weixin.qq.com/s/ZJoXe3m57mmN

代码片段2：https://developers.weixin.qq.com/s/dsofN3mW7vmz

---

设置在小程序页面的 onLoad或者onShow

显示数字或文字
wx.setTabBarBadge({
 index: 4,
 text: ‘new’, //可改 或者数字

});

移除文字
wx.removeTabBarBadge({
 index: 4,

});

//加红点
wx.showTabBarRedDot({
index: 4,

});

移除红点
wx.hideTabBarRedDot({
index: 4,

});