小程序——自定义tabbar（不同权限显示不同tabbar）

1.假如有两个用户，教师以及学生，教师tabbar显示两个，学生tabbar显示三个
（1）准备两种图片，当前页亮的图片以及非当前页不亮的图片

（2）首先创建一个新的js，用于填写tabbar的内容，包括显示的字以及图片的路径，并暴露出去

var studentMenus = {
    
    
  activeUrl: 'info',
  list:[{
    
    
    currentUrl:"student_select",
    "pagePath": "pages/student",
    "text": "选择",
    "iconPath": "/images/",
    "selectedIconPath": "/images/"
  },
  {
    
    
    currentUrl:"find_all",
    "pagePath": "pages/student/",
    "text": "列表",
    "iconPath": "/images/",
    "selectedIconPath": "/images/"
  },
  {
    
    
    currentUrl:"info",
    "pagePath": "pages/",
    "text": "个人中心",
    "iconPath": "/images/",
    "selectedIconPath": "/images/"
  }]
}

var teacherMenus = {
    
    
  activeUrl: 'info',
  list:[
  {
    
    
    currentUrl:"teacher_select",
    "pagePath": "pages/teacher/",
    "text": "选择",
    "iconPath": "/images/",
    "selectedIconPath": "/images/"
  },
  {
    
    
    currentUrl:"info",
    "pagePath": "pages/",
    "text": "个人中心",
    "iconPath": "/images/",
    "selectedIconPath": "/images/"
  }
]
}

module.exports = {
    
    
  studentMenuData: studentMenus,
  teacherMenuData: teacherMenus
}

（3）tabbar起始页js初始化

Page({
    
    
  data: {
    
    
    /* 声明权限数据 */
    roleId: "",
    /* 声明跳转Target */
    PageCur: "info",
    /* 声明菜单数据 */
    menus: {
    
    },
  },
  options:{
    
    
    addGlobalClass:true,
  }
})

（4）tabbar的起始页（我的项目是info页）的js中导入上面的js

var menus  = require('../menu');//填写上面js的路径位置

（5）tabbar跳转方法（tabbar起始页js）

NavChange(e) {
    
    
    var cur = e.currentTarget.dataset.cur;
    if(cur){
    
    
      this.setData({
    
    
        PageCur: cur,
        "menus.activeUrl": cur
      })
    }
  }

（6）不同角色，显示不同tabbar（tabbar起始页js）

options.roleId = get();
    /* roleId 0:学生；1:老师 */
    if(options.roleId == 0){
    
    
      this.setData({
    
    
        roleId: options.roleId,
        menus: menus.studentMenuData
      })
    } else{
    
    
      this.setData({
    
    
        roleId: options.roleId,
        menus: menus.teacherMenuData
      })
    }

（7）tabbar模板tabbar.wxml

<!-- 普通菜单模板 -->
<template name="tabBar">
  <view class="cu-bar tabbar bg-black shadow foot"  >
    <view class="action" bindtap="NavChange" data-cur="{
     
     {item.currentUrl}}" wx:for="{
     
     {menus.list}}" wx:key="currentUrl">
      <view class='cuIcon-cu-image'>
        <image src="{
     
     {menus.activeUrl==item.currentUrl?item.selectedIconPath:item.iconPath}}"></image>
      </view>
      <view class="{
     
     {menus.activeUrl==item.currentUrl?'text-green':'text-gray'}}">{
   
   {item.text}}</view>
    </view>
  </view>
</template>

（8）组件显示方式（tabbar起始页wxml）前三个为第一个角色，第一和第四为第二个角色

<!-- 前三个为第一个权限，第一和第四为第二权限 -->
<info wx:if="{
     
     {PageCur=='info'}}"></info>
<find_all wx:if="{
     
     {PageCur=='find_all'}}" ></find_all>
<student_select wx:if="{
     
     {PageCur=='student_select'}}" ></student_select>
<teacher_select wx:if="{
     
     {PageCur=='teacher_select'}}" ></teacher_select>

<!-- tabar菜单 -->
<template is="tabBar" data="{
     
     {menus}}" />

（9）其他页面（非tabbar页面）需要加上

wx.hideTabBar({
    
    
      animation: true,
    })