添加底部导航栏tabbar
效果图:


如果要添加底部导航栏,最少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的更多相关文章
- 小程序 - 底部导航栏“tabBar”
小程序底部导航 1.app.json页面配置: { "pages": [ "pages/movie/movie", "pages/cinema/cin ...
- 01 uni-app框架学习:项目创建及底部导航栏tabBar配置
1.创建一个项目类型选择uniapp 2. pages里新建3个页面如下 3.在pages.json中配置底部导航tabBar 效果展示:
- 微信小程序添加底部导航栏
修改 app.json 文件即可 "tabBar": { "selectedColor": "#1296db", "list&qu ...
- 使用fragment添加底部导航栏
切记:fragment一定要放在framlayout中,不然不会被替换完全(就是切换之后原来的fagment可能还会存在) main.xml <LinearLayout xmlns:androi ...
- 04-Flutter移动电商实战-打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- Flutter移动电商实战 --(4)打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
- ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论
1.先上原始效果图: 2.完成后效果 2.实现思路: ion ...
- 微信小程序从零开始开发步骤(三)底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
- 微信小程序自定义底部导航栏组件+跳转
微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...
随机推荐
- zabbix 发现 vmvare esxi6.7 虚拟主机
1:服务端配置确认 确保 #vi /etc/zabbiz/zabbix-server/zabbix_server.conf ## 确认其中有 StartVMwareCollectors项目 值 > ...
- 【C++】共用体\联合体(union)
共用体的用法与结构体差不多,只不过将关键字由struct变成了union.共用体使不同的类型变量存放到同一段内存单元中,所以共用体在同一时刻只能存储一个数据成员的值,共用体的大小等于最大成员的大小(结 ...
- 20204107 孙嘉临《Python程序设计》实验一报告
课程:<python程序设计> 班级:2041 姓名:孙嘉临 学号:20204107 实验教师:王志强 实验日期:2021年4月12日 必修/选修:公选课 ##一.实验内容 1.熟悉Pyt ...
- 6. QT国际化 translate QT语言家 翻译
main. QTranslator *qtTranslator = new QTranslator(); if (IsChinese()) { qtTranslator->load(" ...
- 38、linux中软件的安装方法
38.1.rpm安装: rpm -ivh 包名# i:安装的软件: v:显示正在安装的软件信息: h:显示安装软件的进度: rpm -ql 包名 #查看安装包里的文件: rpm -qa 包名#查询包是 ...
- 『无为则无心』Python序列 — 23、Python序列的公共API
目录 1.运算符 @1.+加号 @2.*乘号 @3.in或not in 2.公共方法 @1.len()方法 @2.del和del() @3.max()方法 @4.min()方法 @5.range() ...
- web自动化之windows页面切换
一.为什么切换windows页面 在页面操作过程中,存在点击某个元素之后会重新打开一个windows页面,如果不切换至新页面的话,无法在新页面中进行操作,程序会出现报错 二.如何切换 1.获取当前所有 ...
- pip与apt-get的使用
pip的使用 pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. pip --version #python2.x 版本命令,显示版本和路径 p ...
- 1.3.4、通过Host匹配
server: port: 8080 spring: application: name: gateway cloud: gateway: routes: - id: guo-system4 uri: ...
- Java实验项目二——二维数组实现九九乘法表
Program:打印乘法口诀表 (1)编写一个方法,参数(二维数组),完成将二维数组中的数据按照行列显示的工作. (2)编写一个测试方法,给出99乘法表,放入到二维数组中,调用(1)中的方法,显示乘法 ...