微信小程序tabBar的开发设置

最新推荐文章于 2025-01-28 18:31:32 发布

杪商柒

最新推荐文章于 2025-01-28 18:31:32 发布

阅读量1.4k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/WZY22502701/article/details/127115370

版权

微信小程序专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何在小程序中配置TabBar，包括在app.json中添加tabBar节点，设置list数组，为每个tab项指定pagePath、text、iconPath和selectedIconPath等属性，以实现首页、消息和联系我们页面的Tab切换效果。请注意，pages中的页面路径需与tabBar配置对应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置tabBar

1.打开app.json配置文件和 pages,window平级，新增tabBar节点

2.节点中，新增数组这个数组中存放的是每个tab项的配置对象

3.在list数组中，每新增一个tab项的配对象,对象包括的属性如下

1.pagePath指定当前tab对应的页面路径【必填】

2.text 指定当前tab上按钮的文字【必填】

3.iconPath 指定当前tab未选中时候的图片路径【选填】

4.selectedIconPath 指定当前tab被选中后高亮的图片路径【选填】

app.json文件中的配置

"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/message.png",
      "selectedIconPath": "images/tabs/message-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "images/tabs/contact.png",
      "selectedIconPath": "images/tabs/contact-active.png"
    }