uni-app学习笔记-手动配置底部导航（二）
公司开发需要，打算花几天的时间，使用uni-app做一个考勤打卡app，功能很简单，使用上下班打卡，具体的考勤时间显示，当天考勤缺勤的人数统计，以及登录界面，个人信息头像显示界面。
前面以及对于uni-app的编辑器下载安装，以及新建一个项目的模板作了说明了，今天就先手动配置一下底部导航，模块不多，四个就够了。
1：新建一个空白项目 文件，新建，项目，新建一个uni-app
选择运行，在浏览器运行，现在已经创建空白模板了，开始写项目
2：配置一下底部导航 当然可以选择新建模板就带有底部导航的模板，也可以自己手动配置，这里说一下手动配置对的步骤：
在pages里面新建4个页面
3：打开pages.json
写入新建的4个页面的路径
并且加上图标的路径
pages.json如下：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/tabbar/tabbar-1/tabbar-1",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/tabbar/tabbar-2/tabbar-2",
"style": {}
},
{
"path": "pages/tabbar/tabbar-3/tabbar-3",
"style": {}
},
{
"path": "pages/tabbar/tabbar-4/tabbar-4",
"style": {}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"borderStyle": "black",
// "backgroundColor": "#333",
"color": "#8F8F94",
"selectedColor": "#f33e54",
"list": [{
"pagePath": "pages/tabbar/tabbar-1/tabbar-1",
"iconPath": "static/img/tabbar/home.png",
"selectedIconPath": "static/img/tabbar/homeactive.png",
"text": "首页"
},
{
"pagePath": "pages/tabbar/tabbar-2/tabbar-2",
"iconPath": "static/img/tabbar/guanzhu.png",
"selectedIconPath": "static/img/tabbar/guanzhuactive.png",
"text": "关注"
},
{
"pagePath": "pages/tabbar/tabbar-3/tabbar-3",
"iconPath": "static/img/tabbar/news.png",
"selectedIconPath": "static/img/tabbar/newsactive.png",
"text": "消息"
},
{
"pagePath": "pages/tabbar/tabbar-4/tabbar-4",
"iconPath": "static/img/tabbar/me.png",
"selectedIconPath": "static/img/tabbar/meactive.png",
"text": "我的"
}
]
}
}ok，导航做好了，接下来就是完善每一个页面 里面的具体内容啦：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读