效果图:

如果要添加底部导航栏,最少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. 基于redis实现的四种常见的限流策略

    引言 在web开发中功能是基石,除了功能以外运维和防护就是重头菜了.因为在网站运行期间可能会因为突然的访问量导致业务异常.也有可能遭受别人恶意攻击 所以我们的接口需要对流量进行限制.俗称的QPS也是对 ...

  2. Spring Boot WebFlux-02——WebFlux Web CRUD 实践

    第02课:WebFlux Web CRUD 实践 上一篇基于功能性端点去创建一个简单服务,实现了 Hello.这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD We ...

  3. noip模拟7[匹配·回家·寿司]

    这次考试状态好像还是没有回来,只拿了55pts,还全是第一题的功劳,就是一个小KMP,然后还让我给打错了 就很难受,while打成了if,然后wa掉45分考完立马拿回来了,悔死了,害 第二题爆零了,为 ...

  4. ST算法模板

    void work() { int t=log(n)/log(2); for(int j=1;j<=t;++j) { for(int i=1;i<=(n+1-(1<<j));+ ...

  5. NOIP模拟测试19「count·dinner·chess」

    反思: 我考得最炸的一次 怎么说呢?简单的两个题0分,稍难(我还不敢说难,肯定又有人喷我)42分 前10分钟看T1,不会,觉得不可做,完全不可做,把它跳了 最后10分钟看T1,发现一个有点用的性质,仍 ...

  6. linux常用命令及一些静态动态库相关知识

    1 查找然后grep,最后在复制到特定目录 find . -depth -name *.java | xargs grep -i lijiangtao | awk -F ":" ' ...

  7. Unity 异步加载 进度条

    当我们进行游戏开发时,时常会进行场景切换,如果下个场景较大,切换时就会出现卡顿现象,甚至看起来像是"死机",非常影响用户体验,我们这时就可以运用异步加载,在界面上显示加载的进度条以 ...

  8. Kubernetes自动横向伸缩集群节点以及介绍PDB资源

    在kubernetes中,有HPA在需要的时候创建更多的pod实例.但万一所有的节点都满了,放不下更多pod了,怎么办?显然这个问题并不局限于Autoscaler创建新pod实例的场景.即便是手动创建 ...

  9. 第6章:深入理解Pod对象

    Pod是最小的部署单元,也是后面经常配置的地方,本章节带你熟悉Pod中常见资源配置及参数. 也就是YAML这部分: ... template: metadata: labels: app: web s ...

  10. 8、linux常用命令

    8.1.pwd: 显示当前的路径: -L:显示逻辑路径,即快捷方式的路径(默认的参数): -P :显示物理路径,真实的路径: 8.2.man: 命令的查看: 8.3.help: 命令的查看: 8.4. ...