1、從配置文件中設置tabBarjavascript
app.json配置文件中配置tab的項:html
"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" } ] },
更多屬性說明:java
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBarjson
2、使用js代碼修改tabBar小程序
關於tabBar的目前支持的jsAPI以下:微信小程序
名稱 | 功能說明 |
---|---|
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 |
經常使用操做api
1.目前已經支持唏噓該tab的項內容連接地址,目前不支持刪除某一項微信
2.目前支持總體顯示和隱藏 tabBar網絡
3.目前支持顯示或隱藏紅點 、顯示或隱藏badgeapp
在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 } })
更多: