🎥 作者简介: CSDN\阿里云\腾讯云\华为云开发社区优质创作者,专注分享大数据、Python、数据库、人工智能等领域的优质内容 🌸个人主页: 长风清留杨的博客 🍃形式准则: 无论成就大小,都保持一颗谦逊的心,尊重他人,虚心学习。 ✨推荐专栏: Python入门到入魔,Mysql入门到入魔,Python入门基础大全,Flink入门到实战 🍂若缘分至此,无法再续相逢,愿你朝朝暮暮,皆有安好,晨曦微露道早安,日中炽热说午安,星河长明寄晚安🍂
小程序开发中的全局配置文件是app.json,它位于小程序的根目录下。这个文件非常重要,因为它包含了小程序的一些基础信息和全局配置。
tabBar是移动端应用中一种常见的页面效果,它主要用于实现多个页面之间的快速切换。在小程序开发中,tabBar同样扮演着非常重要的角色。小程序中的tabBar通常被分为底部tabBar和顶部tabBar两种类型。
注意:
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | tabBar 的位置,支持 bottom(底部)或 top(顶部),但通常默认且更常见的是底部。 |
borderStyle | String | 否 | black | tabBar 上边框的颜色,仅支持 black(黑色)或 white(白色),用于设置边框的显示颜色。 |
color | HexColor | 否 | - | tab 上文字的默认(未选中)颜色,使用十六进制颜色代码进行定义。 |
selectedColor | HexColor | 否 | - | tab 上的文字选中时的颜色,同样使用十六进制颜色代码进行定义,用于区分选中状态的文字颜色。 |
backgroundColor | HexColor | 否 | - | tabBar 的背景色,使用十六进制颜色代码进行定义,用于设置工具栏的背景色调。 |
list | Array | 是 | - | tab 页签的列表,是一个数组类型,包含了多个 tab 项的配置信息,最少需要配置2个 tab,最多可配置5个 tab,以满足用户界面的导航需求。 |
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 页面路径,页面必须在 pages 中预先定义 |
text | String | 是 | tab 上显示的文字 |
iconPath | String | 是 | 未选中时的图标路径;当 position 为 top 时,不显示 icon |
selectedIconPath | String | 是 | 当 position 为 top 时,不显示 icon(选中状态) |
预期能达到以下效果,有底部的tabBar、分别是首页、消息、个人中心,选中之前是没有填充颜色的图标,选中后是填充颜色的图标
这些是需要的图标,可以看到选中是深色有填充的,没有选中是浅色没有填充的,那我们命名的时候可以这样名称,没有选中的默认为自己的名字,例如home,选中的加上 -active,例如home-active
需要原版图标的话直接私信我,或者关注公众号:小白的大数据之旅
三个tab页面分别是首页、消息和个人中心
在app.js中添加如下内容
{
"pages": [
"pages/home/home",
"pages/message/message",
"pages/individual/individual"
]
}
编写完上面的代码之后保存,对应的目录会自动创建
在app.js中分别设置首页、消息、个人中心的页面,下面是app.json的源代码
{
// 定义一个数组,用于存放小程序中所有页面的路径
"pages": [
"pages/home/home", // 首页页面路径
"pages/message/message", // 消息页面路径
"pages/individual/individual", // 个人中心页面路径
"pages/index/index", // 索引页面路径(通常作为默认页面,但这里可能用作其他用途)
"pages/test/test", // 测试页面路径
"pages/logs/logs" // 日志页面路径
],
// 定义小程序窗口的表现
"window": {
"backgroundTextStyle": "dark", // 下拉 loading 的样式,dark 为深色背景,light 为浅色背景
"navigationBarBackgroundColor": "#2b4b6b", // 导航栏背景颜色
"navigationBarTitleText": "公众号:小白的大数据之旅", // 导航栏标题文字
"navigationBarTextStyle": "white", // 导航栏标题文字颜色
"backgroundColor": "#efefef", // 页面背景颜色
"onReachBottomDistance": 100 // 页面上拉触底事件触发时距离页面底部距离
},
// 定义小程序底部标签栏的表现
"tabBar": {
"list": [
{
"pagePath": "pages/home/home", // 页面路径,首页路径
"text": "首页", // 标签栏上显示的文字
"iconPath": "/images/tabs/home.png", // 未选中时的图标路径
"selectedIconPath": "/images/tabs/home-active.png" // 选中时的图标路径
},
{
"pagePath": "pages/message/message", // 页面路径,消息页面路径
"text": "消息", // 标签栏上显示的文字
"iconPath": "/images/tabs/mess.png", // 未选中时的图标路径
"selectedIconPath": "/images/tabs/mess-active.png" // 选中时的图标路径
},
{
"pagePath": "pages/individual/individual", // 页面路径,个人中心页面路径
"text": "个人中心", // 标签栏上显示的文字
"iconPath": "/images/tabs/individual.png", // 未选中时的图标路径
"selectedIconPath": "/images/tabs/individual-active.png"// 选中时的图标路径
}
]
},
// 小程序使用的样式版本,v2为推荐的最新版本
"style": "v2",
// 指明 sitemap.json 文件的位置,该文件用于配置小程序内搜索
"sitemapLocation": "sitemap.json"
}
结果:
可以尝试点击下面的三个按钮,看看是什么样的效果
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有