写在前面
很多小程序都有一个页面底部导航菜单,我们都叫他底部tabBar工具。今天我开发的小程序中需要设置tabBar菜单。那我们就分享一下设置的方法吧。
设置页面
对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个。所以我们先要设置好要导航的2-5个页面。
我们在小程序的app.json文件的开关pages标签下地工设置页面,目录会自动生成。如下代码:
{
"pages": [
"pages/home/home",
"pages/cat/cat",
"pages/my/my"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
}
}
菜单设置
我们在window标签后面直接放上以下代码:
"tabBar": {
"selectedColor":"#33a3dc",
"list" : [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/image/home.png",
"selectedIconPath": "/image/home1.png"
},
{
"pagePath": "pages/cat/cat",
"text": "分类",
"iconPath": "/image/strategy.png",
"selectedIconPath": "/image/strategy1.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/image/personal.png",
"selectedIconPath": "/image/personal1.png"
}
]
}
这只是tabBar标签而已,完整的app.json文件内容如下:
{
"pages": [
"pages/home/home",
"pages/cat/cat",
"pages/my/my"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"tabBar": {
"selectedColor":"#33a3dc",
"list" : [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/image/home.png",
"selectedIconPath": "/image/home1.png"
},
{
"pagePath": "pages/cat/cat",
"text": "分类",
"iconPath": "/image/strategy.png",
"selectedIconPath": "/image/strategy1.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/image/personal.png",
"selectedIconPath": "/image/personal1.png"
}
]
}
}
说明:
参数说明
selectedColor为选中的字体颜色,可根据自己页面样式设置。
pagePath为导航到的页面,这个很简单。
iconPath为菜单文件上方的图标,自己可以选择喜欢的图标,可以直接到iconfont-阿里巴巴矢量图标库找自己想要的图标。
selectedIconPath为选择后的图标,和上面的iconPath一样,不多说。
最终效果