微信小程序入门《四》实例:导航栏样式、tabBar导航栏
实例内容
- 导航栏样式设置
- tabBar导航栏
实例一:导航栏样式设置
小程序的导航栏样式在app.json
中定义。
这里设置导航,背景黑色,文字白色,文字内容测试小程序
app.json
内容:
{ "pages":[ "pages/index/index", "pages/login/login", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"red", "navigationBarBackgroundColor": "#000", "navigationBarTitleText": "测试小程序", "navigationBarTextStyle":"#fff" } }
window
中的样式说明:
属性 |
类型 |
默认值 |
描述 |
---|---|---|---|
navigationBarBackgroundColor |
HexColor |
000000 导航栏背景颜色,如”#000000” |
|
navigationBarTextStyle |
String |
white |
导航栏标题颜色,仅支持 black/white |
navigationBarTitleText |
String |
导航栏标题文字内容 |
|
backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
backgroundTextStyle |
String |
dark |
下拉背景字体、loading 图的样式,仅支持 dark/light |
enablePullDownRefresh |
Boolean |
false |
是否开启下拉刷新 |
效果:
实例二:tabBar导航栏
tabBar挺好的,可以放置于顶部或者底部,用于不同功能页面的切换。
tabBar同样在app.json
中进行定义,看一下我在app.json
中对tabBar的相关定义:
"tabBar": { "selectedColor": "#1296db", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/ico-home.png", "selectedIconPath": "images/ico-home-d.png" },{ "pagePath": "pages/setting/setting", "text": "设置", "iconPath": "images/ico-setting.png", "selectedIconPath": "images/ico-setting-d.png" },{ "pagePath": "pages/help/help", "text": "帮助", "iconPath": "images/ico-help.png", "selectedIconPath": "images/ico-help-d.png" }] }
效果:
tabBar相关属性定义说明:
属性 |
类型 |
必填 |
默认值 |
描述 |
---|---|---|---|---|
color |
HexColor |
是 |
tab 上的文字默认颜色 |
|
selectedColor |
HexColor |
是 |
tab 上的文字选中时的颜色 |
|
backgroundColor |
HexColor |
是 |
tab 的背景色 |
|
borderStyle |
String |
否 |
black |
tabbar上边框的颜色, 仅支持 black/white |
list |
Array |
是 |
tab 的列表,详见 list 属性说明,最少2个、最多5个 tab |
|
position |
String |
否 |
bottom |
可选值 bottom、top |
tabBar list定义说明:
属性 |
类型 |
必填 |
说明 |
---|---|---|---|
pagePath |
String |
是 |
页面路径,必须在 pages 中先定义 |
text |
String |
是 |
tab 上按钮文字 |
iconPath |
String |
是 |
图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px |
selectedIconPath |
String |
是 |
选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px |
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
- React技巧1(状态组件与无状态组件的使用)
- zoj 1315 Excuses, Excuses!
- ZOJ 2724 Windows Message Queue(优先队列)
- React多页面应用7(引入eslint代码检查)
- Trie树
- React第三方组件1(路由管理之Router的使用⑤按需加载-下)
- zoj 2876 Phone List
- PHP小知识
- Where's Waldorf?
- POj 1797 Heavy Transportation
- 卡特兰数简介原理性质应用参考:
- UVA Machined Surfaces
- NBUT 1117 Kotiya's Incantation
- React第三方组件1(路由管理之Router的使用④按需加载-上)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java|继承学习总结
- 常用功能加载宏——一个工作簿的工作表另存为工作簿
- VBA使用API_03:创建窗体
- Jackson 反序列化远程代码执行漏洞复现
- MyVBA加载宏——添加自定义菜单01
- JavaScript|计算字符串的字节数
- 7个处理JavaScript值为undefined的技巧
- Python|快速排序
- 如何判断一个网页是列表页还是详情页
- 小游戏:围住神经猫
- JAVA|Java方法的使用
- VBA解压缩ZIP文件06——Huffman树码表
- 精品连载丨安卓 App 逆向课程之五 frida 注入 Okhttp 抓包下篇
- Excel VBA常用功能加载宏——工作表隐藏
- VBE菜单——CommandBars对象