【小程序】微信小程序自定义 tabbar以及隐藏有些页面的tabbar

分���：

1. 选中时显示背景和文字，图标变换为选中状态的图标
2. 默认状态下，进入小程序显示的是中间的 “地图”
3. 选中 “预约”时，隐藏tabbar ，且导航栏显示 返回 按钮，点击返回 “地图”

整体效果

整体目录结构

设置 app.json

在 app.json中 配置tabbar 中的 “custom”: true

{  "pages": [    "custom-pages/custom-active/index",    "custom-pages/custom-order/index",    "custom-pages/custom-my/index"  ],  "entryPagePath":  "custom-pages/custom-active/index",  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "自定义tabbar",    "navigationBarTextStyle": "black"     },  "tabBar": {    "custom": true,    "list": [      {        "pagePath": "custom-pages/custom-my/index",        "text": "我的",        "iconPath": "/images/tabbar/my.png"      },      {        "pagePath": "custom-pages/custom-active/index",        "text": "活动"      },      {        "pagePath": "custom-pages/custom-order/index",        "text": "预约"      }    ]  },  "usingComponents": {},}

在项目根目录下，添加 custom-tab-bar

custom-tab-bar为component

编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例

在根目录下新建文件夹名为 custom-pages ，存放自定义tabbar的页面

custom-pages

-> custom-active

-> custom-my

-> custom-order

custom-tab-bar代码

Component({  data: {    // tabbar 的列表     tabbarLists:[      {        pagePath: "/custom-pages/custom-my/index",        text: "我的",        iconPath: "/images/tabbar/my.png",        selectedIconPath: "/images/tabbar/my_active.png"      },      {        pagePath: "/custom-pages/custom-active/index",        text: "地图",        iconPath: "/images/tabbar/map.png",        selectedIconPath: "/images/tabbar/map_active.png"      },      {        pagePath: "/custom-pages/custom-order/index",        text: "预约",        iconPath: "/images/tabbar/order.png",        selectedIconPath: "/images/tabbar/order_active.png"      }    ],    active:null, //设为数字，会产生tabbar闪烁    isShow:true //控制显示隐藏tabbar   },  methods: {    switchTab(e){      const { index,url } = e.currentTarget.dataset;      wx.switchTab({url})    }  }})