一、从配置文件中设置tabBar

app.json配置文件中配置tab的项：

  "tabBar": {
"color": "#000",
"selectedColor": "#F69C21",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
      {
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "style/image/index.png",
"selectedIconPath": "style/image/index1.png"
      },
      {
"pagePath": "pages/tabone/tabone",
"text": "订单",
"iconPath": "style/image/order.png",
"selectedIconPath": "style/image/order1.png"
      }
    ]
  },

更多属性说明：

​

 

二、使用js代码修改tabBar

关于tabBar的目前支持的jsAPI如下：

Tab Bar

名称

功能说明

wx.showTabBarRedDot

显示 tabBar 某一项的右上角的红点

wx.showTabBar

显示 tabBar

wx.setTabBarStyle

动态设置 tabBar 的整体样式

wx.setTabBarItem

动态设置 tabBar 某一项的内容，​​2.7.0​​ 起图片支持临时文件和网络文件

wx.setTabBarBadge

为 tabBar 某一项的右上角添加文本

wx.removeTabBarBadge

移除 tabBar 某一项右上角的文本

wx.hideTabBarRedDot

隐藏 tabBar 某一项的右上角的红点

wx.hideTabBar

隐藏 tabBar

常用操作

1.目前已经支持唏嘘该tab的项内容链接地址，目前不支持删除某一项

2.目前支持整体显示和隐藏 tabBar

3.目前支持显示或隐藏红点  、显示或隐藏badge

 

在app onLanch的时候即可修改tab项

App({
onLaunch: function () {
//修改tab项
wx.setTabBarItem({
index: 0,
text: 'text',
pagePath: '/pages/textarea/textarea',
iconPath: '/style/image/address.png',
selectedIconPath: '/style/image/address.png',
success: res => {
console.info(res);
      },
fail: res => {
console.info(res);
      }
    });

//隐藏tab项
// wx.hideTabBar({
// })
//显示红点
wx.showTabBarRedDot({
index: 1,
    })
//显示红字，badge
wx.setTabBarBadge({
index: 0,
text: '3',
    });
  },
globalData: {
userInfo: null
  }
})

 

微信小程序tabBar 设置和使用整理_ide