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

对于微信小程序自带的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": ""
        }
        ...
      ]
    })

动态渲染的tabBar对应页面需要在list中声明过,否则不会导航到对应页面。

你可能感兴趣的:(微信小程序,小程序)