小程序配置文件 —— 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"
    }]
  }

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

相关推荐
canglingyue43 分钟前
微信小程序截屏与录屏功能详解
微信小程序·小程序
微三云-轩2 小时前
区块链系统:解决549 亿元积分商城是否违法的问题
大数据·小程序·重构·区块链·生活
D155540880584 小时前
电竞护航小程序成品搭建三角洲行动护航小程序开发俱乐部点单小程序成品游戏派单小程序定制
游戏·小程序
说私域14 小时前
兴趣电商内容数据洞察未来市场走向研究——基于开源AI智能名片链动2+1模式S2B2C商城小程序的实践
人工智能·小程序
wmsj057815 小时前
小程序图片批量保存太麻烦?用这款工具一键搞定,附工具教程!
小程序
说私域17 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序服务提升复购率和转介绍率的研究
人工智能·小程序
2501_915921431 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008891 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
闯闯桑1 天前
toDF(columns: _*) 语法
开发语言·前端·spark·scala·apache
!win !1 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app