微信小程序入门四: 导航栏样式、tabBar导航栏
2023-09-27 14:21:17 时间
实例内容
- 导航栏样式设置
- 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 按数组的顺序排序。
相关文章
- redis,nodejs,php,pub/sub 实战: 微信语音识别
- 微信小程序入门二: 条件、遍历、网络请求、获取本地图片
- 微信小程序入门三: 简易form、本地存储
- 精品微信小程序计算机维修服务+后台管理系统|前后分离VUE
- 精品微信小程序学生公寓生活管理系统+后台管理系统|前后分离VUE
- 精品微信小程序ssm培训机构管理系统+后台管理系统|前后分离VUE
- 微信小程序宠物交易商城+后台管理系统|前后分离VUE
- 基于Nodejs的家政服务微信小程序的设计和实现
- 微信小程序在线医生答疑+后台管理系统|前后分离VUE
- 极客日报第125期:微信将于 5 月 19 日之后停止小程序打开 App 技术服务;原装 AirTag 发货时间延长至 4-5 周;TensorFlow 2.5.0稳定版发布
- YOLOv8微信小程序来了,支持分类检测分割模型
- 使用python向企业微信发送文字和图片消息
- 微信小程序的基本认识
- 微信第三方平台开发流程
- 微信小程序 写一个获取验证码 及setInterval 使用基本方法
- 使用CocoaPods给微信集成SDK打印收发消息
- 微信小程序api详细教程
- 【玩转微信公众平台之八】 演示样例代码分析
- 跳转微信或者支付宝的二维码界面
- 微信小程序的动画效果
- 微信小程序如何设置开发者和体验者
- 微信小程序入门到实战(四)
- 微信小程序入门到实战(二)
- 打造“微信小程序”组件化开发框架
- 微信小程序学习用demo推荐:微信涂鸦:canvas学习
- 微信小程序demo:贝思客:电商模板,购物车模板