微信小程序给特定页面添加底部tabber

最新推荐文章于 2025-10-28 12:16:27 发布

原创最新推荐文章于 2025-10-28 12:16:27 发布 · 638 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文介绍了如何在微信小程序中利用tabBar功能，包括如何在app.json中配置展示的页面，以及如何在特定页面动态控制tabBar的显示和导航。重点讲解了如何在页面生命周期中使用getTabBar方法进行操作。

对于微信小程序自带的tabBar功能，如果想在某个页面显示的话，需要把这个页面定义在tabBar的list中即可。在定义被定义在tabbar的页面中，还可以使用getTabBar进行动态的控制tabBar。
1.app.json添加要展示tarBar的页面
首先要把页面声明在app.json的pages中
然后在app.json中设置"tabBar.custom"设置为true
然后在"tabBar.list"中添加要展示tabBar的的页面

//app.json
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "",
        "selectedIconPath": ""
      },
	...
  },

然后在对应的页面就会出现tabBar。
2.在含有tabBar页面中动态展示tabBar个数
在tabBar的list中声明过的页面，可以在页面的onShow生命周期中，通过**this.getTabBar()**获取到tabBar的对应，通过setData方法动态的控制展示什么导航，选中等。

    this.getTabBar().setData({
      selected: 0,
      list: [{
          "pagePath": "/components/Index/Index",
          "text": "首页",
          "iconPath": "",
          "selectedIconPath": ""
        }
        ...
      ]
    })