当前位置:   article > 正文

uniapp:不同权限设置不同的tabBar_uniapp 小程序首页权限设置

uniapp 小程序首页权限设置

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就可以了。

  1. <script>
  2. export default {
  3. globalData:{
  4. reviseTabbarByUserType: function() {
  5. let username = uni.getStorageSync('login_user_info').username;
  6. if(username=='admin'){
  7. uni.setTabBarItem({
  8. index: 1,
  9. visible: false,
  10. })
  11. }else{
  12. uni.setTabBarItem({
  13. index: 1,
  14. visible: true,
  15. })
  16. }
  17. }
  18. },
  19. onShow: function() {
  20. console.log('App Show')
  21. },
  22. onHide: function() {
  23. console.log('App Hide')
  24. }
  25. }
  26. </script>

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

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

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

最终效果:

jeecg用户有订单,admin没有。

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/103235
推荐阅读
相关标签
  

闽ICP备14008679号