• uniapp:不同权限设置不同的tabBar


    1、在pages.json里,将所有tabBar涉及的页面都加进来。

    我这里使用username来动态显示tabBar。

    jeecg用户显示:首页,订单,消息,发现,我的,一共5个tabBar。

    admin用户显示:首页,消息,发现,我的,一共4个tabBar。

    所以最终要设置5个tabBar。

    1. "tabBar": {
    2. "color": "#bbbbbb",
    3. "selectedColor": "#d63a2b",
    4. "borderStyle": "white",
    5. // 需要注意,使用了tabBar后,页面跳转就得用switchTab,不能再用redirectTo和navigateTo了
    6. "list": [{
    7. "selectedIconPath": "./static/tabbar/home_cur.png",
    8. "iconPath": "./static/tabbar/home.png",
    9. "pagePath": "pages/index/index",
    10. "text": "首页"
    11. },
    12. {
    13. "selectedIconPath": "./static/tabbar/orders_cur.png",
    14. "iconPath": "./static/tabbar/orders.png",
    15. "pagePath": "pages/orders/orders",
    16. "text": "订单"
    17. },
    18. {
    19. "selectedIconPath": "./static/tabbar/messages_cur.png",
    20. "iconPath": "./static/tabbar/messages.png",
    21. "pagePath": "pages/messages/messages",
    22. "text": "消息"
    23. },
    24. {
    25. "selectedIconPath": "./static/tabbar/find_cur.png",
    26. "iconPath": "./static/tabbar/find.png",
    27. "pagePath": "pages/find/find",
    28. "text": "发现"
    29. },
    30. {
    31. "selectedIconPath": "./static/tabbar/my_cur.png",
    32. "iconPath": "./static/tabbar/my.png",
    33. "pagePath": "pages/my/my",
    34. "text": "我的"
    35. }
    36. ]
    37. }

    2、在App.vue的globalData里加入reviseTabbarByUserType方法,如下代码:

    admin和jeecg两个用户tabBar的区别是,后者有订单,前者没有,所以if else我们就把订单这一项的visible根据判断重新设置一下,其他项默认就是true,要显示,需要注意的是,一定要把if else写全,我第一次就只写了if,没写else,导致效果出不来。

    登录成功的时候,已经把userInfo保存在本地了,所以只需要getStorageSync就可以了。

    3、在tabBar涉及到的每个页面的onShow里调用reviseTabbarByUserType。

    我这里一共有5个页面,每个都要加这段代码。

    1. onShow() {
    2. getApp().globalData.reviseTabbarByUserType();
    3. },

    最终效果:

    jeecg用户有订单,admin没有。

    参考博客:uniapp 根据不同权限设置不同的原生tabbar(不同数量也可以)--(不支持小程序)_uni.settabbaritem_前端小胡兔的博客-CSDN博客

  • 相关阅读:
    吉利发布新出行科技品牌“礼帽出行” 定位高品质定制化出行
    公众号留言功能怎么打开?有什么条件?
    Docker学习4-常用命令之重要的容器命令
    MATLB|可视化学习(plot和bar)
    学习路之PHP--laravel postman 提交表单出现419错误
    神经系统的肿瘤有哪些,脑神经肿瘤最常见的是
    【Spring Cloud系统】- 轻量级高可用工具Keepalive详解
    【Spring Boot】单元测试
    【Unity实战100例】Unity读取加载Gif动图的两种方式
    开源的分布式 NoSQL 数据库管理系统 王者 Cassandra 简介 应用场景 优点 不足 版本历史
  • 原文地址:https://blog.csdn.net/lilycheng1986/article/details/133093824