小程序入门系列之 tabBar：配置、属性与使用详解

作者：快去debug2023.12.25 12:12浏览量：27

简介：小程序入门系列之 tabBar

小程序入门系列之 tabBar
在微信小程序中，tabBar是一个非常重要的组件，它用于在应用程序中显示tab导航菜单。通过tabBar组件，用户可以方便地切换不同页面或选项卡。以下我们将深入了解小程序中的tabBar。
一、tabBar的属性
tabBar是小程序中的一个全局配置，可以在app.json文件中进行设置。tabBar的属性主要包括以下几种：

  1. list：一个数组，用于定义tabBar的各个选项卡。每个选项卡都是一个对象，包含以下属性：
  • text：选项卡的文字。
  • pagePath：选项卡对应的页面路径。
  • iconPath：选项卡的图标的路径。
  • selectedIconPath：选项卡被选中时的图标路径。
  • badge：数字显示在图标上方的红色小圆点，用于表示未读消息的数量。
  1. otherPagePath：非当前页面的路径集合，当用户点击tab切换到其他tab对应的页面时，会在底部显示最近去过的两个页面。最近一次点击的页面路径集合可以在App的App.PagePathSet获取。
    二、使用方式
    下面是一个简单的tabBar的例子：
    1. {
    2. "pages": [
    3. "pages/index/index",
    4. "pages/logs/logs"
    5. ],
    6. "window": {
    7. "backgroundTextStyle": "light",
    8. "navigationBarBackgroundColor": "#fff",
    9. "navigationBarTitleText": "微信接口功能演示",
    10. "navigationBarTextStyle": "black"
    11. },
    12. "tabBar": {
    13. "list": [
    14. {
    15. "text": "首页",
    16. "pagePath": "./index"
    17. },
    18. {
    19. "text": "我的",
    20. "pagePath": "./logs",
    21. "iconPath": "/images/logs.png",
    22. "selectedIconPath": "/images/logs-active.png",
    23. "badge": 1
    24. }
    25. ]
    26. }
    27. }
    在上面的例子中，我们定义了一个包含两个选项卡的tabBar，第一个选项卡对应首页，第二个选项卡对应我的页面。第二个选项卡被选中时，会有一个背景色突出显示。同时，我们设置了第二个选项卡的未读消息数量为1，并在其图标上显示了一个红色小圆点。
    三、注意事项
    在使用tabBar时，需要注意以下几点：
  2. tabBar是一个全局配置，对整个小程序都有效。因此，需要在app.json文件中进行配置，而不是在某个页面的json文件中配置。
  3. tabBar的list属性是一个数组，每个元素对应一个选项卡。每个选项卡都是一个对象，可以设置不同的属性和值。比如，text属性设置选项卡的文字，pagePath属性设置选项卡对应的页面路径等。

最热文章