效果图:

如果要添加底部导航栏,最少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. 四、缓存DNS

    作用:缓存解析结果,提高解析速度 搭建方式: 1.全局转发,所有的DNS解析请求全部转发给公网DNS 2.根域迭代,所有的DNS解析请求全部发给根域DNS服务器 真机上实现缓存DNS服务器 1.搭建Y ...

  2. You Only Look One-level Feature

    你只需要看一个层次的特征 摘要:本文回顾了单阶段检测器的特征金字塔网络(FPN),指出FPN的成功在于其对目标检测优化问题的分治解决,而不是多尺度特征融合.从优化的角度来看,我们引入了一种替代的方法来 ...

  3. pandas的数据结构介绍(一)—— Series

    pandas两个主要数据结构之一--Series 类似于一维数组,由一组数据和与其相关的一组索引组成 obj = Series([4, 7, -5, 3], index=['d', 'b', 'a', ...

  4. 实现一个带有动效的 React 弹窗组件

    我们在写一些 UI 组件时,若不考虑动效,就很容易实现,主要就是有无的切换(类似于 Vue 中的 v-if 属性)或者可见性的切换(类似于 Vue 中的 v-show 属性). 1. 没有动效的弹窗 ...

  5. 快速串讲——JVM内存的区域划分

    目的 快速定位JVM内存泄漏或者溢出等问题. 面试基础题,加分项. 文章持续更新,微信搜索「万猫学社」第一时间阅读,关注后回复「电子书」,免费获取12本Java必读技术书籍. 程序计数器(Progra ...

  6. ES服务的搭建(八)

    看下图的淘宝页面,可以看到搜索有多个条件及搜索产品,并且支持多种排序方式,例如按价格:其实这块有个特点,就是不管你搜索哪个商品他都是有分类的,以及他对应的品牌,这两个是固定的,但其它参数不一定所有商品 ...

  7. oracle行转列实现

    1.新建测试表 create table TEST_TABLE( T1 VARCHAR2(10),--姓名 T2 VARCHAR2(10),--科目 T3 VARCHAR2(10)--成绩 ) 2.插 ...

  8. CentOS-yum安装Nginx

    查看系统版本 $ cat /etc/redhat-release Nginx 不在默认的 yum 源中,使用官网的 yum 源 $ rpm -ivh http://nginx.org/packages ...

  9. Java并发实战一:线程与线程安全

    从零开始创建一家公司 Java并发编程是Java的基础之一,为了能在实践中学习并发编程,我们跟着创建一家公司的旅途,一起来学习Java并发编程. 进程与线程 由于我们的目标是学习并发编程,所以我不会把 ...

  10. 各种学位&不同学段的表达

    1.学士 B.S.=Bachelor of Science 2.硕士 Master ​ MA.Sc(master of Science科学硕士) ​ MA.Eng(master of engineer ...