小程序——自定义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>


<template is="tabBar" data="{{menus}}" />

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

wx.hideTabBar({
      animation: true,
    })