wxtabBar的设置（右上角红点和消息，以及显示与隐藏）

wxml

<view class="title">tabBar设置</view>
<view class="demo-box">
<view class="title">1右上角文本设置</view>
<button type="primary" size="mini" bindtap="setText">添加文本</button>
<button type="primary" size="mini" bindtap="removeText">取消文本</button>
</view>
<view class="demo-box">
<view class="title">2右上角红点设置</view>
<button type="primary" size="mini" bindtap="showRedDot">添加红点</button>
<button type="primary" size="mini" bindtap="hideRedDot">取消红点</button>
</view>
<view class="demo-box">
<view class="title">3tabBar样式设置</view>
<button type="primary" size="mini" bindtap="setBarStyle">整体设置</button>
<button type="primary" size="mini" bindtap="setColor">单项设置</button>
</view>
<view class="demo-box">
<view class="title">4tabBar的显示与隐藏</view>
<button type="primary" size="mini" bindtap="showTabBar">显示</button>
<button type="primary" size="mini" bindtap="hideTabBar">隐藏</button>
</view>

js

Page({
  data: {
  
  },
  //设置文本
  setText:function(){
    wx.setTabBarBadge({
      index: 1,
      text: '99',
    })
  },
  //取消文本
  removeText:function(){
    wx.removeTabBarBadge({
      index: 1,
    })
  },
  //显示红点
  showRedDot:function(){
    wx.showTabBarRedDot({
      index: 1,
    })
  },
  //隐藏红点
  hideRedDot:function(){
    wx.hideTabBarRedDot({
      index: 1,
    })
  },
  //设置tabBar整体样式
  setBarStyle:function(){
    wx.setTabBarStyle({
      Color: '#ff0000',
      selectedColor:'#0000ff'
    })
  },
  //设置tabBar单项样式
  setBarItemStyle:function(){
    wx.setTabBarItem({
      index: 1,
      text:'首页',
      iconPath:'../image/1.png',
      selectedIconPath:'../image/3.png'
    })
  },
  //还原tabBar样式
  resetBarStyle:function(){
    wx.setTabBarItem({
      index: 1,
      text:'tabBar例题',
      iconPath:'../image/4.png',
      selectedIconPath:'../image/5.png'
    })
    wx.setTabBarStyle({
      Color: '#000000',
      selectedColor:'#1aad19'
    })
  },
  //显示TabBar
  showTabBar:function(){
    wx.showTabBar({})
  },
  //隐藏TabBar
  hideTabBar:function(){
    wx.hideTabBar({})
  },
)}

app.json

{
  "tabBar": {
    "color": "#000",
    "selectedColor": "1aad19",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "./pages/image/1.png",
        "selectedIconPath": "./pages/image/3.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/tabBar/tabBar",
        "iconPath": "./pages/image/4.png",
        "selectedIconPath": "./pages/image/5.png",
        "text": "tabBar例题"
      }
    ]
  }
}