微信小程序Tabbar
文章目录
一、Tabbar是什么?
Tabbar是一种位于小程序底部的跳转导航栏,与微信底部导航栏类似
二、使用步骤
1.创建所需要的界面和所需要的图片
2.配置文件:
我们找到项目根目录中的配置文件 app.json 加入如下配置信息(示例):
"tabBar": {
"selectedColor": "#8C46AA",
"color": "black",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "icons/message.png",
"selectedIconPath": "icons/message_.png"
},
{
"pagePath": "pages/guide/guide",
"text": "指南",
"iconPath": "icons/guide.png",
"selectedIconPath": "icons/guide_.png"
},
{
"pagePath": "pages/index/index",
"text": "个人",
"iconPath": "icons/user.png",
"selectedIconPath": "icons/user_.png"
}
]
},
如此一来就算基本配置好了,效果如下:
3.属性的解释
color 未选择时 底部导航文字的颜色
selectedColor 选择时 底部导航文字的颜色
borderStyle 底部导航边框的样色(只能白色和黑色)
list 导航配置数组
selectedIconPath 选中时 图标路径
iconPath 未选择时 图标路径
pagePath 选中时页面访问地址
text 导航图标下方文字
三、Tabbar的API扩展功能
提示:这里可以显示右上角红点文字,隐藏Tabbar等
1.配置按钮(只是方便示例):
在一个页面wxml中写入按钮
<button bindtap="btnClick1" type="primary">显示 tabBar 的页面1的右上角的红点</button>
<button bindtap="btnClick2" type="primary">隐藏 tabBar 的页面1的右上角的红点</button>
<button bindtap="btnClick3" type="primary">为 tabBar 右上角添加文本</button>
<button bindtap="btnClick4" type="primary">移除 tabBar 右上角的文本</button>
<button bindtap="btnClick5" type="primary">隐藏 tabBar</button>
<button bindtap="btnClick6" type="primary">显示 tabBar</button>
<button bindtap="btnClick7" type="primary">动态改变 tabBar 内容</button>
<button bindtap="btnClick8" type="primary">动态改变 tabBar 图标文字颜色</button>
2.js函数配置
Page({
data: {
},
btnClick1: function (options) {
wx.showTabBarRedDot({
index: 0,
})
},
btnClick2: function (options) {
wx.hideTabBarRedDot({
index: 0,
})
},
btnClick3: function (options) {
wx.setTabBarBadge({
index: 0,
text: '1'
})
},
btnClick4: function (options) {
wx.removeTabBarBadge({
index: 0,
})
},
btnClick5: function (options) {
wx.hideTabBar({
animation: true //是否需要动画效果
})
},
btnClick6: function (options) {
wx.showTabBar({
animation: true
})
},
btnClick7: function (options) {
wx.setTabBarItem({
index: 0,
text: '改变',
iconPath: 'icons/clock.png',
selectedIconPath: 'icons/clock.png'
})
},
btnClick8: function (options) {
wx.setTabBarStyle({
color: '#66ccff',
selectedColor: '#00FF00',
backgroundColor: '#f2f2f2',
borderStyle: 'white'
})
}
})
效果如下:
更多配置参数可参考: