小程序配置文件 —— 14 全局配置 - tabbar配置

全局配置 - tabBar配置

tabBar 字段:定义小程序顶部、底部 tab 栏,用以实现页面之间的快速切换;可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面;

在上面图中,标注了一些 tabBar 常用的配置项:

  • borderStyle:用来控制 tab 栏上方的一条边线,控制边线是否需要进行演示或者隐藏;
  • backgroundColor:用来配置整条 tab 栏的背景色;
  • selectedColor:用来配置 tabBar 被激活时对应的文字颜色;
  • color:用来配置 tabBar 没有被激活时文字的颜色;
  • list:list 是一个数组,数组中每一项都是一个对象,在对象中可以配置 selectedIconPath、pagePath、iconPath、text;selectedIconPath 表示当对应的 tabBar 被激活时对应 icon 的路径,pagePath 表示当对应的 tabBar 被激活时需要跳转的页面路径,iconPath 用来配置当前 tabBar 没有被激活时对应 icon 的路径,text 用来定义每个 tabBar 对应的文字是什么;

注意事项:tab 按数组的顺序排序。list 配置最少配置 2 个,最多 5 个;可以通过官方文档:tabBar 配置项来学习进行相关配置;

打开微信开发者工具,选择根目录下的 app.json 文件,由于 tabBar 主要用于页面间的切换,这里我们现在 pages 字段中创建好对应的页面信息:

app.json 中的 tabBar 字段和 pages 字段是同级的,所以在 app.json 中添加这个字段:

bash 复制代码
"tabBar": {
    "selectedColor": "#f3514f",
    "color": "#666",
    "borderStyle":"black",
    "position": "bottom",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/assets/tabbar/index.png",
      "selectedIconPath": "/assets/tabbar/index-active.png"
    },
    {
      "pagePath": "pages/cate/cate",
      "text": "分类",
      "iconPath": "/assets/tabbar/cate.png",
      "selectedIconPath": "/assets/tabbar/cate-active.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "/assets/tabbar/cart.png",
      "selectedIconPath": "/assets/tabbar/cart-active.png"
    },
    {
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "/assets/tabbar/profile.png",
      "selectedIconPath": "/assets/tabbar/profile-active.png"
    }]
  }

参考视频:尚硅谷微信小程序开发教程

相关推荐
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
是Dream呀3 天前
时序数据库选型指南:Apache IoTDB企业级解决方案深度解析
apache·时序数据库·iotdb
一个天蝎座 白勺 程序猿3 天前
Apache IoTDB(5):深度解析时序数据库 IoTDB 在 AINode 模式单机和集群的部署与实践
数据库·apache·时序数据库·iotdb·ainode
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
智_永无止境3 天前
Apache Commons Math3 使用指南:强大的Java数学库
apache·math