微信小程序不同身份登录，显示不同的tabbar（导航栏）

微信小程序，不同身份登录不同的底部导航栏。初次遇到这个问题，菜鸟的我没有一丝丝头绪，看了几篇博客后，终于明白了。下面是总结的模板，拿去直接用就欧克。

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

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

首先建一个template的文件夹，然后写入下面内容。写一个模板文件：tabbar.wxml

   

 <template name="tabBar">    
      <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}}; {{tabBar.borderStyle? (tabBar.position=='top'? 'border-bottom: solid 1px '+tabBar.borderStyle + ';' : 'border-top: solid 1px '+tabBar.borderStyle + ';') : ''}}">    
      <block wx:for="{{tabBar.list}}" wx:key="pagePath">    
        <navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">    
          <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>    
          <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>  
          <text>{{item.text}}</text>    
        </navigator>    
        </block>  
        <view class="clear"></view>    
      </view>    
    </template>   

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

在app.js中自定义如下

  

  //app.js  
    App({
      onLaunch: function () {
     
      },
     
      //第一种底部  
      editTabBar: function () {
        //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。
     
        var curPageArr = getCurrentPages();    //获取加载的页面
        var curPage = curPageArr[curPageArr.length - 1];    //获取当前页面的对象
        var pagePath = curPage.route;    //当前页面url
        if (pagePath.indexOf('/') != 0) {
          pagePath = '/' + pagePath;
        }
        
        var tabBar = this.globalData.tabBar;
        for (var i = 0; i < tabBar.list.length; i++) {
          tabBar.list[i].active = false;
          if (tabBar.list[i].pagePath == pagePath) {
            tabBar.list[i].active = true;    //根据页面地址设置当前页面状态    
          }
        }
        curPage.setData({
          tabBar: tabBar
        });
      },
      //第二种底部，原理同上
      editTabBar1: function () {
        var curPageArr = getCurrentPages();
        var curPage = curPageArr[curPageArr.length - 1];
        var pagePath = curPage.route;
        if (pagePath.indexOf('/') != 0) {
          pagePath = '/' + pagePath;
        }
        var tabBar = this.globalData.tabBar1;
        for (var i = 0; i < tabBar.list.length; i++) {
          tabBar.list[i].active = false;
          if (tabBar.list[i].pagePath == pagePath) {
            tabBar.list[i].active = true;
          }
        }
        curPage.setData({
          tabBar: tabBar
        });
      },
      globalData: {
        //第一种底部导航栏显示
        tabBar: {
          "color": "#9E9E9E",
          "selectedColor": "#f00",
          "backgroundColor": "#fff",
          "borderStyle": "#ccc",
          "list": [
            {
              "pagePath": "/pages/index/index",
              "text": "职位",
              "iconPath": "/images/my.png",
              "selectedIconPath": "/images/my.png",
              "clas": "menu-item",
              "selectedColor": "#4EDF80",
              active: true
            },
            {
              "pagePath": "/pages/logs/logs",
              "text": "简历",
              "iconPath": "/images/my.png",
              "selectedIconPath": "/images/my.png",
              "selectedColor": "#4EDF80",
              "clas": "menu-item",
              active: false
            },
            {
              "pagePath": "/pages/test/test",
              "text": "我的",
              "iconPath": "/images/my.png",
              "selectedIconPath": "/images/my.png",
              "selectedColor": "#4EDF80",
              "clas": "menu-item",
              active: false
            }
          ],
          "position": "bottom"
        },
        //第二种底部导航栏显示
        tabBar1: {
          "color": "#9E9E9E",
          "selectedColor": "#f00",
          "backgroundColor": "#fff",
          "borderStyle": "#ccc",
          "list": [
            {
              "pagePath": "/pages/index/index",
              "text": "首页",
              "iconPath": "/images/my.png",
              "selectedIconPath": "/images/my.png",
              "clas": "menu-item1",
              "selectedColor": "#4EDF80",
              active: false
            },
            {
              "pagePath": "/pages/logs/logs",
              "text": "消息",
              "iconPath": "/images/my.png",
              "selectedIconPath": "/images/my.png",
              "selectedColor": "#4EDF80",
              "clas": "menu-item1",
              active: true
            },
            {
              "pagePath": "/pages/cont/index",
              "text": "简历",
              "iconPath": "/images/my.png",
              "selectedIconPath": "/images/my.png",
              "selectedColor": "#4EDF80",
              "clas": "menu-item1",
              active: false
            },
            {
              "pagePath": "/pages/detail/index",
              "text": "我的",
              "iconPath": "/images/my.png",
              "selectedIconPath": "/images/my.png",
              "selectedColor": "#4EDF80",
              "clas": "menu-item1",
              active: false
            }
          ],
          "position": "bottom"
        }
      }
    })  

在app.wxss中定义显示样式

    .menu-item{  
      width: 32%;  
      float: left;  
      text-align: center;  
      padding-top: 8px;  
    }  
    .menu-item1{  
      width: 24%;  
      float: left;  
      text-align: center;  
      padding-top: 8px;  
    }  
    .img{
      width: 23px;  
      height: 23px;  
      display: block;  
      margin:auto;  
    }  
    .clear{  
      clear: both;  
    }  
    .tab-bar{  
      position: fixed;  
      width: 100%;  
      padding: 0px 2%;  
    }  
     
    .button{
      margin: 130px;
    }

/

接下来就是要去调用这个模板了，首先要在需要添加tabBar的wxml页面中添加，接下来就是js中，这样就设置完毕了，相信现在大家都知道如何来实现了//

下面是给出的小例子

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

商家登录界面的登录按钮

<button bindtap='tologs' size='mini' class="button">点击切换</button>

商家进入的首页

     <import src="../../template/tabbar.wxml"/>
     <template is="tabBar" data="{{tabBar}}"/>
    
    

index.js

    //index.js  
    var app = getApp();
    Page({
      data: {
     
      },
      onShow:function(){
        app.editTabBar();    //显示自定义的底部导航
      },
      tologs:function(){     //按钮的绑定事件，点击跳转至logs
        wx.redirectTo({
          url: '../logs/logs',
        })
      },
      onLoad: function () {
      
      }
    })  

logs.wxml

  
     用户顾客登录界面
     <button bindtap='toindex' size='mini' class="button">点击切换</button>

用户顾客进入的首页

  <import src="../../template/tabbar.wxml"/>
     <template is="tabBar" data="{{tabBar}}"/>

logs.js

    //logs.js  
    var app = getApp();
    Page({
      data: {
       
      },
      //点击按钮跳转页面
      toindex: function () {
        wx.redirectTo({
          url: '../index/index',
        })
      },
      onLoad: function () {
        //加载本页面的tabBar样式
        app.editTabBar1();
      }
      
    })  

参考的博客：

微信小程序自定义底部导航栏，切换不同页面显示不同tabbar_small_lack的博客-CSDN博客_微信小程序底部导航自定义

微信小程序如何实现自定义tabBar_燚轩软件科技-CSDN博客_小程序如何自定义tabbar