zoukankan      html  css  js  c++  java
  • 微信小程序-根据角色显示不同tabBar(示例)

    注意:这里结合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,看看我的效果吧:

    源码:

      链接:https://pan.baidu.com/s/1HHwZnk0J7cosi4_v_94ZjQ
      提取码:xsr8

     

  • 相关阅读:
    python每日一题002
    python每日一题001
    python正则-元字符
    组合命令行生成工具pict
    接口测试工具postman安装
    python正则-group()
    树结构数据整理
    safari 调试的小问题
    a 标签 href 被浏览器拦截
    js 将浮点数的科学计数法转换成string 的 0.000000 显示
  • 原文地址:https://www.cnblogs.com/eRrsr/p/12228181.html
Copyright © 2011-2022 走看看