小程序API（1.19）利用API函数设置标签栏的方法

 app.json

{
  "pages": [
    "pages/index/index",
    "pages/jiaoxue/jiaoxue",
    "pages/keyan/keyan",
    "pages/zixun/zixun",
    "pages/guanyu/guanyu"
  ],
  "window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "你笑起来真好看",
    "navigationBarTextStyle": "black",
    "backgroundColor": ""
  },
  "tabBar": {
    "color": "#000",
    "selectedColor":"#00f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/home-off.png",
        "selectedIconPath": "/images/home-on.png"
      },
      {
        "pagePath": "pages/jiaoxue/jiaoxue",
        "text": "教学",
        "iconPath": "/images/jiaoxue-off.png",
        "selectedIconPath": "/images/jiaoxue-on.png"
      },
      {
        "pagePath": "pages/keyan/keyan",
        "text": "科研",
        "iconPath": "/images/keyan-off.png",
        "selectedIconPath": "/images/keyan-on.png"
      },
      {
        "pagePath": "pages/zixun/zixun",
        "text": "资讯",
        "iconPath": "/images/zixun-off.png",
        "selectedIconPath": "/images/zixun-on.png"
      },
      {
        "pagePath": "pages/guanyu/guanyu",
        "text": "关于我们",
        "iconPath": "/images/guanyu-off.png",
        "selectedIconPath": "/images/guanyu-on.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

/**app.wxss**/

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

.box {
  margin: 20rpx;
  padding: 20rpx;
  border: 1px solid silver;
}

.title {
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: red;
}

/**app.wxss**/

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

.box {
  margin: 20rpx;
  padding: 20rpx;
  border: 1px solid silver;
}

.title {
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: red;
}

//app.js
App({

})

<!--pages/index/index.wxml-->
<view class='box'>
  <view class='title'>TabBar设置</view>
  <view class='btnLayout'>
    <button type='primary' bindtap='showTabBar'>显示标签</button>
    <button type='primary' bindtap='hideTabBar'>隐藏标签</button>
  </view>
  <view class='btnLayout'>
    <button type='primary' bindtap='setTabBarBadge'>设置标记</button>
    <button type='primary' bindtap='removeTabBarBadge'>删除标记</button>
  </view>
  <view class='btnLayout'>
    <button type='primary' bindtap='showTabBarRedDot'>显示红点</button>
    <button type='primary' bindtap='hideTabBarRedDot'>隐藏红点</button>
  </view>
  <view class='btnLayout'>
    <button type='primary' bindtap='setTabBarStyle'>设置整体样式</button>
    <button type='primary' bindtap='setTabBarItem'>设置单项样式</button>
  </view>
  <button type='primary' bindtap='reset' style='95%;'>还原标签栏样式</button>

</view>

/* pages/index/index.wxss */

.btnLayout {
  /* 设置button组件的布局 */
  display: flex; /* 设置布局方式为flex */
  flex-direction: row; /* 设置水平方向为主轴方向 */
  justify-content: space-around; /* 设置组件沿主轴方向平均分布，两边留有一半的间隔空间 */
  margin-bottom: 20rpx; /* 设置下边距为20rpx */
}

button {
  width: 45%; /* 组件宽度为45% */
}

// pages/index/index.js
Page({
  showTabBar:function(){
    wx.showTabBar({
      aniamtion: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  hideTabBar:function(){
    wx.hideTabBar({
      aniamtion: true,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  setTabBarBadge:function(){
    wx.setTabBarBadge({
      index: 3,
      text: '10',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  removeTabBarBadge:function(){
    wx.removeTabBarBadge({
      index: 3,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  showTabBarRedDot:function(){
    wx.showTabBarRedDot({
      index: 1,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  hideTabBarRedDot:function(){
    wx.hideTabBarRedDot({
      index: 1,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  setTabBarStyle:function(){
    wx.setTabBarStyle({
      color: '#ff0000',
      selectedColor: '#0000ff',
      backgroundColor: '#ffff00',
      borderStyle: '',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  setTabBarItem:function(){
    wx.setTabBarItem({
      index: 4,
      text: '云开发',
      iconPath: '/images/cloud.png',
      selectedIconPath: '/images/cloud-selected.png',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

  reset:function(){
    wx.setTabBarStyle({
      color: '#000000',
      selectedColor: '#00ff00',
      backgroundColor: '#fff',
      borderStyle: '',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
    wx.setTabBarItem({
      index: 4,
      text: '关于我们',
      iconPath: '/images/guanyu-off.png',
      selectedIconPath: '/images/guanyu-on.png',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },

})

显示和隐藏标签栏

　　wx.showTabBar(Object object)和wx.hideTabBar (Object object)分别用于显示和隐藏标签栏。 其参数属性除了success、fail和complete外，还包括 boolean类型的animation，表示“是否需要动画效果”。

添加和删除标签文本标记

　　添加标签文本标记

　　　　wx.setTabBarBadge(Object object) 用于在某个标签 右上角添加文本标记。其参数属性除success、fail和 complete外，还包括：

　　　　

 　　删除标签文本标记

　　　　wx.removeTabBarBadge(Object object) 用于 删除某个标签右上角的文本标记，其参数属性除 success、fail和complete外 ， 还包括标签下标 index。

显示和隐藏标签红点

　　wx.showTabBarRedDot(Object object)和 wx.hideTabBarRedDot(Object object) 分别用来显示和隐藏 某个标签右上角的红点。 其参数属性除success、fail和complete外， 还包括标签下标index。

设置标签栏样式

　　wx.setTabBarStyle(Object object)用于动态设置 标签栏的整体样式。

　　

设置标签样式

　　wx.setTabBarItem(Object object) 用 于 设 置 某个标签样式。其参数属性除了success、fail和 complete外，还包括: