3 | 小程序底部导航栏 tabBar 小实验

一、前言

相信你在上文（ 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