微信小程序自定义底部导航栏，切换不同页面显示不同tabbar

在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。

比如一个小程序需要两个版本（用户版、商家版），并且能通过一闷昌个按钮在两个版本间进行切换，可能会用到这种方式。

此处以两个页面（index，logs）显示两种tabbar样橡粗式为例，通过切换按钮梁罩镇进行切换。

首先有一个模板文件：tabbar.wxml

在app.json中无需定义“tabBar”

在app.js中自定义如下

在app.wxss中定义显示样式

index.wxml，用到自定义tabbar的页面的首部都需要引入模板文件

index.js

logs.js

加载自定义tabbar的那句话（app.editTabBar）写在onload或onshow中都可以。

只写了两个主页面，其他页面可自行定义跳转。

最后放上效果图：

1.用于实现多页面的快速切换。

2.tabbar导航栏只能配置最少 2 个、最多 5 个 tab 页签。

3.步骤：

① 通过 app.json 文件的 pages 节点，新建 对应的 tab 页面

② tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象

③ 在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：

-pagePath 指定当前 tab 对应的页面路径【必填】

-text 指定当前 tab 上按钮的文字【必填燃拿虚】

-iconPath 指定当前 tab 未选中时候的图片路径【可选】

-selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

使用组件：<敏游navigator url=" / ">1<皮燃/navigator>

使用api:wx.navigateTo({url:" / "})

---