微信小程序-根据角色显示不同tabar(示例)

注意:这里结合ColorUI(最近研究这个)加菜单模板的方式,可能还有更简洁的方式,这里只是一种解决方案,欢迎讨论     -------- 转载请标注

一. 业务逻辑:有时使用场景会有不同角色登录同一小程序,需要根据不同角色显示不同菜单

二. 实现:

  1> app.json (只需配置起始页面index)

 "pages": [
    "pages/sys/index/index",
    ...]

  2> index.wxml

<datas wx:if="{{PageCur==‘datas‘}}"></datas>
<maintenance wx:if="{{PageCur==‘maintenance‘}}"></maintenance>
<monitor wx:if="{{PageCur==‘monitor‘}}"></monitor>
<mine wx:if="{{PageCur==‘mine‘}}"></mine>
<!-- tabar菜单 -->
<template is="tabBar" data="{{menus}}"  />

  3> index.js

// pages/_index/_index.js
var menus  = require(../../../datas/js/menus);

Page({
  /**
   * 页面的初始数据
   */
  data: {
    /* 声明权限数据 */
    roleId: "",
    /* 声明跳转Target */
    PageCur: "datas",
    /* 声明菜单数据 */
    menus: {}
  },

  /* ColorUI页面跳转方式 */
  NavChange(e) {
    var cur = e.currentTarget.dataset.cur;
    if(cur){
      this.setData({
        PageCur: cur,
        "menus.activeUrl": cur
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /* 
      获取角色信息
      ...
    */
    options.roleId = 2;
    /* roleId 1:站长;2:管理员 */
    if(options.roleId == 1){
      this.setData({
        roleId: options.roleId,
        menus: menus.agentMenuData
      })
    } else{
      this.setData({
        roleId: options.roleId,
        menus: menus.masterMenuData
      })
    }
  }
})

  4> index.json(Color将一级页面都作为组件)

{
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "datas": "/pages/biz/datas/home/home",
    "maintenance": "/pages/biz/maintenance/home/home",
    "monitor": "/pages/biz/monitor/home/home",
    "mine": "/pages/biz/mine/home/home"
  }
}

  5> 我的菜单模板tabar-template.xml

<!-- 普通菜单模板 -->
<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.checkedImgUrl:item.unCheckImgUrl}}"></image>
      </view>
      <view class="{{menus.activeUrl==item.currentUrl?‘text-green‘:‘text-gray‘}}">{{item.title}}</view>
    </view>
  </view>
</template>

<!-- 自定义菜单模板 -->
<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 wx:if="{{item.btnType==0}}">
        <view class=cuIcon-cu-image>
          <image src="{{menus.activeUrl==item.currentUrl?item.checkedImgUrl:item.unCheckImgUrl}}"></image>
        </view>
        <view class="{{menus.activeUrl==item.currentUrl?‘text-green‘:‘text-gray‘}}">{{item.title}}</view>
      </view>
       <view wx:else="{{item.btnType==0}}">
        <view class="action text-{{item.btnTitleTextColor==‘‘?‘gray‘:item.btnTitleTextColor}} add-action" bindtap="{{item.bindTap}}">
          <button class="cu-btn cuIcon-add text-{{item.btnImgTextColor==‘white‘?‘‘:item.btnImgTextColor}} bg-{{item.btnBgColor==‘‘?‘black‘:item.btnBgColor}}}  shadow"></button> 
          <view>{{item.title}}</view>
        </view>
       </view>
    </view>
  </view>
</template>

  6> 菜单数据 menus.js

/* 背景颜色一览:
red:嫣红  orange:桔橙 yellow:明黄 olive:橄榄  green:森绿;
cyan:天青  blue:海蓝  purple:姹紫  mauve:木槿 pink:桃粉;
brown:棕褐 grey:玄灰  gray:草灰  black:墨黑 white:雅白 */

var agentMenus = {
  activeUrl: datas,
  list:[{
    currentUrl:"datas",
    unCheckImgUrl:"/assets/images/tabbar/basics.png",
    checkedImgUrl:"/assets/images/tabbar/basics_cur.png",
    btnType: 0,
    title:"数据"
  },{
    currentUrl:"maintenance",
    unCheckImgUrl:"/assets/images/tabbar/component.png",
    checkedImgUrl:"/assets/images/tabbar/component_cur.png",
    btnType: 0,
    title:"维护"
  },{
    bindTap: "_scanCode",
    btnTitleTextColor: "",
    btnImgTextColor: "",
    btnBgColor: "green",
    btnType: 1,
    title:"扫码"
  },{
    currentUrl:"monitor",
    unCheckImgUrl:"/assets/images/tabbar/plugin.png",
    checkedImgUrl:"/assets/images/tabbar/plugin_cur.png",
    btnType: 0,
    title:"监控"
  },{
    currentUrl:"mine",
    unCheckImgUrl:"/assets/images/tabbar/about.png",
    checkedImgUrl:"/assets/images/tabbar/about_cur.png",
    btnType: 0,
    title:"我的"
  }]
}

var masterMenus = {
  activeUrl: datas,
  list:[{
    currentUrl:"datas",
    unCheckImgUrl:"/assets/images/tabbar/basics.png",
    checkedImgUrl:"/assets/images/tabbar/basics_cur.png",
    btnType: 0,
    title:"数据"
  },{
    currentUrl:"mine",
    unCheckImgUrl:"/assets/images/tabbar/about.png",
    checkedImgUrl:"/assets/images/tabbar/about_cur.png",
    btnType: 0,
    title:"我的"
  }]
}

module.exports = {
  agentMenuData: agentMenus,
  masterMenuData: masterMenus
}

------------------------------------------------------------------------------------------------     分割线     --------------------------------------------------------------------------------------------------------

那几个跳转的组件页面要加上

去其中一个附上:xxx.wxml

<text>----->我的页面</text>

xxx.js

Component({

  /**
   * 组件的属性列表
   */
  options:{
    addGlobalClass: true,
  }
})

xxx.json

{
  "component": true
}

xxx.wxss 空的

OK,看看我的效果吧:

微信小程序-根据角色显示不同tabar(示例)

 

 

微信小程序-根据角色显示不同tabar(示例)

上一篇:[3.0] 一个人开发一个App,小程序从0到1,删减添加


下一篇:「4.0」一个人开发一个App,小程序从0到1,布局