当前位置:   article > 正文

uniapp动态设置tabbar_uni-app动态配置tabbar

uni-app动态配置tabbar
1、将所有需要的tabbar配置在pages.json里 
  1. "tabBar": {
  2. "color": "#BEC0C3",
  3. "selectedColor": "#00A29C",
  4. "borderStyle": "#EEEEEE",
  5. "backgroundColor": "#ffffff",
  6. "list": [{
  7. "pagePath": "pages/tabBar/devicePage",
  8. "iconPath": "static/image/tabbar/device.png",
  9. "selectedIconPath": "static/image/tabbar/device_active.png",
  10. "text": "设备"
  11. },
  12. {
  13. "pagePath": "pages/tabBar/voicePage",
  14. "iconPath": "static/image/tabbar/device.png",
  15. "selectedIconPath": "static/image/tabbar/device_active.png",
  16. "text": "语音"
  17. },
  18. {
  19. "pagePath": "pages/tabBar/warnPage",
  20. "iconPath": "static/image/tabbar/warning.png",
  21. "selectedIconPath": "static/image/tabbar/warning_active.png",
  22. "text": "预警"
  23. }, {
  24. "pagePath": "pages/tabBar/locationPage",
  25. "iconPath": "static/image/tabbar/position.png",
  26. "selectedIconPath": "static/image/tabbar/position_active.png",
  27. "text": "位置"
  28. }, {
  29. "pagePath": "pages/tabBar/fencePage",
  30. "iconPath": "static/image/tabbar/fence.png",
  31. "selectedIconPath": "static/image/tabbar/fence_active.png",
  32. "text": "围栏"
  33. }, {
  34. "pagePath": "pages/tabBar/myPage",
  35. "iconPath": "static/image/tabbar/my.png",
  36. "selectedIconPath": "static/image/tabbar/my_active.png",
  37. "text": "我的"
  38. }
  39. ]
  40. },

2、app.vue 的globalData里加入reviseTabbarByUserType方法

  1. globalData: {
  2. reviseTabbarByUserType: function () {
  3. let isAdmin = uni.getStorageSync('isAdmin');
  4. if (isAdmin == 1) {
  5. uni.setTabBarItem({
  6. index: 1,
  7. visible: false,
  8. })
  9. } else {
  10. uni.setTabBarItem({
  11. index: 0,
  12. visible: false,
  13. })
  14. }
  15. }
  16. },

3、涉及到的所有tabbar界面在onshow里调用reviseTabbarByUserType方法

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

###补充reviseTabbarByUserType方法解释

uniapp中,reviseTabbarByUserType这个方法是用来根据用户类型修改TabBar的展示内容

  1. reviseTabbarByUserType(userType) {
  2. const tabbar = {
  3. list: [],
  4. };
  5. // 根据用户类型设置TabBar列表
  6. if (userType === 'admin') {
  7. tabbar.list = [
  8. {
  9. pagePath: '/pages/home/home',
  10. text: '首页',
  11. },
  12. {
  13. pagePath: '/pages/admin/admin',
  14. text: '管理',
  15. },
  16. ];
  17. } else {
  18. tabbar.list = [
  19. {
  20. pagePath: '/pages/home/home',
  21. text: '首页',
  22. },
  23. {
  24. pagePath: '/pages/user/user',
  25. text: '我的',
  26. },
  27. ];
  28. }
  29. // 修改TabBar
  30. uni.setTabBarItem(tabbar);
  31. }

     

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

闽ICP备14008679号