微信小程序自定义底部导航栏，切换不同页面显示不同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、找小程序前的准备。首先，你需要将微信更新至iOS6.5.3版本或Android6.5.3版本。

2、找到小程序的办法。在目前公开的线下扫码、微信搜索、公众号关联、好友推荐、保存历史纪录这五种搜索小程序的方法中。但是如果没有好友推荐，微信搜索是最简单找到小程序的办法。

3、最好的办法：微信里面搜索。找到微信底部“发现”按纽，那里会出现小程序的图标，点看，即可看到默认的“小程序示例”。

通过小程序最上方的搜索框进行搜索，比如键入大众点评、今日头条、汽车之家，就可以看到相应的小程序了。就是这么简单。

1、新建一个微信小程序0607，完成后，大致架构如图。

2、打开app.json，在其中配置topbar，如图，红色部分表示的代码；注意：绿色处的逗号，不可省略。

3、上图代码运行后，即可看到添加的底部导航，如图。

4、在app.json中，再添加一个导航test，需要添加两端代码，如图中的代码1和代码2，运行成功后，会在pages文件夹下出现test文件。

5、给添加图标，要使用 iconPath，selectedIconPath这两个属性。

6、运行后，出现底部导航图标，点击选中的显示√，如图。

7、如果不喜欢导航放在下面，可以改变position的值，将其放在最上端即可。

---