小程序 tab bar 配置全解析：打造完美页面切换效果

最新推荐文章于 2025-03-21 08:00:00 发布

阿贾克斯的黎明

最新推荐文章于 2025-03-21 08:00:00 发布

阅读量558

点赞数 4

分类专栏：前端文章标签： windows

本文链接：https://blog.csdn.net/m0_57836225/article/details/145348004

版权

前端专栏收录该内容

501 篇文章

订阅专栏

小程序 tab bar 配置全解析：打造完美页面切换效果

在小程序开发中，tab bar 是实现多页面快速切换的关键组件，能极大提升用户体验。上一篇我们完成了基础配置，今天深入探索，打造更丰富实用的 tab bar 效果。

实现目标

这次要在小程序底部创建包含 “首页”“消息”“联系我们” 三项的 tab bar，点击不同选项可切换对应页面，且选中时显示特定图标。

实现步骤

1. 准备图标资源

首先，将资料目录中的image文件夹拷贝到小程序项目根目录。image文件夹里有tab文件夹，存放着 6 个图标，分成 3 组，每组两个。名字含-active的是选中后的图标，不含的是默认图标。比如home.png是 “首页” 未选中图标，home-active.png是选中图标。这一步就像搭建房子准备好建筑材料，为后续设置图标效果做准备。

2. 新建 tab bar 页面

通过app.json文件配置节点新建页面。在app.json的页面路径配置数组里，按顺序添加/pages/home/home、/pages/message/message、/pages/contact/contact这三个页面路径，分别对应 “首页”“消息”“联系我们” 页面。注意，tab 页签对应的页面必须放在数组开头，否则无法正常渲染。这就好比排队，tab 页签页面得站在队伍最前面。

3. 配置 tab bar 选项

打开配置文件：找到并打开app.json配置文件。
添加 tab bar 节点：在与window节点同级位置，新增tabBar节点。在微信开发者工具里，输入tabBar回车，会自动生成基本结构，方便后续改造。
配置 list 数组：在tabBar节点内添加list数组，存放每个 tab 页签的配置对象。每个对象包含 4 个属性：pagePath（页面路径）、text（显示文本）、iconPath（未选中图标路径）、selectedIconPath（选中图标路径），前两项必填，后两项可选，为美观一般都设置。以 “首页” 为例，配置代码如下：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/image/tab/home.png",
        "selectedIconPath": "/image/tab/home-active.png"
      },
      // 其他页签配置类似
    ]
  }
}

按照上述格式，依次完成 “消息” 和 “联系我们” 页签的配置，修改相应的页面路径、显示文本和图标路径。