一、前言
相信你在上文( 2 | 小程序的配置文件 )中的全局配置文件 app.json 里看到有 tabBar 导航栏配置项,现在我们就来做一个导航栏
二、实践
(1)先把icon文件夹放到pages同层级下
(2)在app.json中创建两个个页面路径
{
"pages":[
"pages/index/index",
"pages/img/img",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
ctrl + s 保存,即可在pages生成文件
(3)配置tabBar属性
参考:tabBar属性
{
"pages":[
"pages/index/index",
"pages/img/img",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icon/_home.png",
"selectedIconPath": "icon/home.png"
},{
"pagePath": "pages/img/img",
"text": "照片",
"iconPath": "icon/_img.png",
"selectedIconPath": "icon/img.png"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
(3)效果
链接:https://pan.baidu.com/s/17QR1mU0JrgsE4KRIwbMC1A
提取码:1234