效果图:

如果要添加底部导航栏,最少2个,最多5个。

app.json

{
"pages": [
"pages/index/index",
"pages/userConsole/userConsole",
"pages/storageConsole/storageConsole",
"pages/databaseGuide/databaseGuide",
"pages/addFunction/addFunction",
"pages/deployFunctions/deployFunctions",
"pages/chooseLib/chooseLib",
"pages/openapi/openapi",
"pages/openapi/serverapi/serverapi",
"pages/openapi/callback/callback",
"pages/openapi/cloudid/cloudid",
"pages/im/im",
"pages/im/room/room"
],
"window": {
"backgroundColor": "#ddd",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "我的微信",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true
},
"sitemapLocation": "sitemap.json",
"style": "v2",
"tabBar": {
"selectedColor": "#00ff00",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/2.jpg",
"selectedIconPath": "images/1.jpg"
},
{
"pagePath": "pages/im/im",
"text": "日志",
"iconPath": "images/4.jpg",
"selectedIconPath": "images/3.jpg"
}
]
},
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
},
"debug":true }

tabBar就是底部导航栏:

  • selectedColor:被选中时显示的颜色
  • borderStyle:导航栏与页面的边界,就是那个分隔线,当为white时,分隔线就看不见了。
  • pagePath:跳转页面的路径
  • text:显示文本
  • iconPath:导航图标路径
  • selectedIconPath:当选中时导航图标路径

networkTimeout是延时,单位是ms

debug是开启debug模式,这样在调试窗口可以看到具体的跳转信息等。

添加底部导航栏tabbar的更多相关文章

  1. 小程序 - 底部导航栏“tabBar”

    小程序底部导航 1.app.json页面配置: { "pages": [ "pages/movie/movie", "pages/cinema/cin ...

  2. 01 uni-app框架学习:项目创建及底部导航栏tabBar配置

    1.创建一个项目类型选择uniapp 2. pages里新建3个页面如下 3.在pages.json中配置底部导航tabBar 效果展示:

  3. 微信小程序添加底部导航栏

    修改 app.json 文件即可 "tabBar": { "selectedColor": "#1296db", "list&qu ...

  4. 使用fragment添加底部导航栏

    切记:fragment一定要放在framlayout中,不然不会被替换完全(就是切换之后原来的fagment可能还会存在) main.xml <LinearLayout xmlns:androi ...

  5. 04-Flutter移动电商实战-打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

  6. Flutter移动电商实战 --(4)打通底部导航栏

    关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...

  7. ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论

    1.先上原始效果图:                                        2.完成后效果                                2.实现思路: ion ...

  8. 微信小程序从零开始开发步骤(三)底部导航栏

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

  9. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

随机推荐

  1. 学废了系列 - WebGIS vs WebGL图形编程

    目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积 ...

  2. NOIP模拟测试8「匹配·回家」

    匹配 哈希能A 水到爆炸 回家 事实上我做过一个原题,甚至比这个回家难的多,而且那个题多组询问必经点 然后我做一组询问就打炸了 大约就是删了很多东西,然后自己想的太简单了 直接统计了割点,懒得打lca ...

  3. SpringBoot_登录注册

    学习SpringBoot需要的前期基础 Spring(Bean容器 IOC set 构造方法 AOP) SpringMVC(GET POST Restful) 对于SpringBoot,约定大于配置 ...

  4. OSPF 路由协议

    OSPF路由协议 目录 一.OSPF路由协议概述 1.1.内部网关和外部网关协议 1.2.OSPF的工作过程 1.3.OSPF的基本概念 二.OSPF 数据包类型 2.1.OSPF数包 2.2.OSP ...

  5. 20204107 孙嘉临《Python程序设计》实验三报告

    课程:<Python程序设计>班级: 2041姓名: 孙嘉临学号: 20204107实验教师:王志强实验日期:2020年5月24日必修/选修: 公选课## 1.实验内容创建服务端和客户端, ...

  6. django 导出excel react下载 --- 导出并下载

    Dajngo查询数据,查询出来之后生成Excel保存本地 class ExportExcel(APIView): def post(self, request, *args, **kwargs): e ...

  7. 流程自动化RPA,Power Automate Desktop系列 - 发布文档中心

    一.背景 内网中有一个基于VuePress搭建的静态文档中心,但是每次修改后都需要重新Build一次才行,之前都是手动执行命令,现在可以基于Power Automate Desktop来创建任务了. ...

  8. 上海某大公司:你是了解Redis对吧?

    <对线面试官>系列目前已经连载26篇啦!有深度风趣的系列! [对线面试官]Java注解 [对线面试官]Java泛型 [对线面试官] Java NIO [对线面试官]Java反射 & ...

  9. 不藏了,这些Java反射用法总结都告诉你们

    摘要:Java反射是一种非常强大的机制,它可以在同一个系统中去检测内部的类的字段.方法和构造函数.它非常多的Java框架中,都大量应用了反射技术,如Hibernate和Spring.可以说,反射机制的 ...

  10. shell运维习题训练

    注:初学shell,以下为本人自己写的答案,如果有更好的,请指教! 1. 求2个数之和: 2. 计算1-100的和 3. 将一目录下所有的文件的扩展名改为bak 4.编译并执行当前目录下的所有.c文件 ...