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

你可能感兴趣的:(小程序,小程序)