介绍
仿造微信底部按钮实现，如下图：
创建页面
创建3-4个页面，空页面即可，略
设置 tabBar 按钮
修改 app.json 文件，增加 tabBar 部分
"color": "#999", // 未选中文字颜色
"selectedColor": "#07C160",// 选中文字颜色
"backgroundColor": "#fff",// 导航栏背景
"borderStyle": "white", // 上边框 black/white
"position": "bottom", // 显示底部
"list": [
{
"pagePath": "pages/index/index", // 页面路径
"text": "首页", // 文字
"iconPath": "/images/me.png", // 图标
"selectedIconPath": "/images/select-me.png" // 选择的图标
}
]
关键代码如下：
"tabBar": {
"color": "#999",
"selectedColor": "#07C160",
"backgroundColor": "#fff",
"borderStyle": "white",
"position": "bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/me.png",
"selectedIconPath": "/images/select-me.png"
},
{
"pagePath": "pages/getvalue/getvalue",
"text": "获取值",
"iconPath": "/images/me.png",
"selectedIconPath": "/images/select-me.png"
},
{
"pagePath": "pages/discover2/discover2",
"text": "发现",
"iconPath": "/images/me.png",
"selectedIconPath": "/images/select-me.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "/images/me.png",
"selectedIconPath": "/images/select-me.png"
}
]
},
全部代码
{
"pages": [
"pages/index/index",
"pages/discover2/discover2",
"pages/getvalue/getvalue",
"pages/me/me",
"pages/form/form",
"pages/shuangxiangbangding/shuangxiang",
"pages/event/event",
"pages/login/login",
"pages/test/test",
"pages/discover/discover",
"pages/reg/reg",
"pages/logs/logs",
"pages/login2/login2"
],
"tabBar": {
"color": "#999",
"selectedColor": "#07C160",
"backgroundColor": "#fff",
"borderStyle": "white",
"position": "bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/me.png",
"selectedIconPath": "/images/select-me.png"
},
{
"pagePath": "pages/getvalue/getvalue",
"text": "获取值",
"iconPath": "/images/me.png",
"selectedIconPath": "/images/select-me.png"
},
{
"pagePath": "pages/discover2/discover2",
"text": "发现",
"iconPath": "/images/me.png",
"selectedIconPath": "/images/select-me.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "/images/me.png",
"selectedIconPath": "/images/select-me.png"
}
]
},
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
坑
pages 数组的第一个页面，必须是 tabBar 的 list 的之一， 否则不显示tabBar 按钮
"pages": [
"pages/index/index", // 必须是 tabBar 的 list 的之一
"pages/discover2/discover2",
"pages/getvalue/getvalue",