devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp 动态tabBar（全过程包含vuex 组件 配置等）

作者：菜鸟追梦旅行 | 2024-02-16 02:18:22

赞

踩

uniapp 动态tabbar

   （装船权限）

 

 （卸船权限）

1.首先我们需要在pages.json配置tabbar  和pages （配置所有tabbar路径）

  1. "pages": [ //pages数组中第一项表示应用启动页,
  2. 		{
  3. 			"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselPlan",
  4. 			"style": {
  5. 				"navigationBarTitleText": "装船作业计划",
  6.  
  7. 				"app-plus": {
  8. 					"titleNView": false,
  9. 					"bounce": "none"
  10. 				}
  11. 			}
  12. 		}, {
  13. 			"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselCommand",
  14. 			"style": {
  15. 				"navigationBarTitleText": "装船指令",
  16. 				"app-plus": {
  17. 					"titleNView": false,
  18. 					"bounce": "none"
  19. 				}
  20. 			}
  21. 		}, {
  22. 			"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselHistory",
  23. 			"style": {
  24. 				"navigationBarTitleText": "历史",
  25. 				"app-plus": {
  26. 					"titleNView": false,
  27. 					"bounce": "none"
  28. 				}
  29. 			}
  30. 		}, {
  31. 			"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan",
  32. 			"style": {
  33. 				"navigationBarTitleText": "卸船作业计划",
  34. 				"app-plus": {
  35. 					"titleNView": false,
  36. 					"bounce": "none"
  37. 				}
  38. 			}
  39. 		}, {
  40. 			"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand",
  41. 			"style": {
  42. 				"navigationBarTitleText": "卸船指令",
  43. 				"app-plus": {
  44. 					"titleNView": false,
  45. 					"bounce": "none"
  46. 				}
  47. 			}
  48. 		}, {
  49. 			"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory",
  50. 			"style": {
  51. 				"navigationBarTitleText": "历史",
  52. 				"app-plus": {
  53. 					"titleNView": false,
  54. 					"bounce": "none"
  55. 				}
  56. 			}
  57. 		}, 
  58.  
  59. 	],	
  60. "tabBar": {
  61. 		"color": "#7a7e83",
  62. 		"selectedColor": "#0faeff",
  63. 		"backgroundColor": "#ffffff",
  64.         // "custom": true,custom(自定义)，不开启的话，在页面是有占位的，就需要在页面进行隐藏
  65. 		"list": [{
  66. 				"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselPlan"
  67.  
  68. 			}, {
  69. 				"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselCommand"
  70.  
  71. 			},
  72. 			{
  73. 				"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselHistory"
  74.  
  75. 			},
  76. 			{
  77. 				"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan"
  78.  
  79. 			}, {
  80. 				"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand"
  81.  
  82. 			},
  83. 			{
  84. 				"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory"
  85.  
  86. 			}
  87. 		]
  88. 	},

2.配置动态tabBar.js

如图↓

 代码↓

  1. // 装船权限
  2. const loadVessel = [{
  3. 		"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselPlan",
  4. 		"text": "装船作业计划",
  5. 		"iconPath": require("@/static/img/common/装船作业计划.png"),
  6. 		"selectedIconPath": require("@/static/img/common/装船作业计划1.png")
  7. 	}, {
  8. 		"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselCommand",
  9. 		"text": "装船指令",
  10. 		"iconPath": require("@/static/img/common/装船指令.png"),
  11. 		"selectedIconPath": require("@/static/img/common/装船指令1.png")
  12. 	},
  13. 	{
  14. 		"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselHistory",
  15. 		"text": "历史",
  16. 		"iconPath": require("@/static/img/common/历史.png"),
  17. 		"selectedIconPath": require("@/static/img/common/历史1.png")
  18. 	}
  19. ]
  20.  
  21. //卸船权限
  22. const unloadVessel = [{
  23. 		"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan",
  24. 		"text": "卸船作业计划",
  25. 		"iconPath": require("@/static/img/common/装船作业计划.png"),
  26. 		"selectedIconPath": require("@/static/img/common/装船作业计划1.png")
  27. 	}, {
  28. 		"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand",
  29. 		"text": "卸船指令",
  30. 		"iconPath": require("@/static/img/common/装船指令.png"),
  31. 		"selectedIconPath": require("@/static/img/common/装船指令1.png")
  32. 	},
  33. 	{
  34. 		"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory",
  35. 		"text": "历史",
  36. 		"iconPath": require("@/static/img/common/历史.png"),
  37. 		"selectedIconPath": require("@/static/img/common/历史1.png")
  38. 	}
  39. ]
  40.  
  41. export default {
  42. 	loadVessel,//装船权限名  最后要存入 isMemberType里
  43. 	unloadVessel//卸船权限名 最后要存入 isMemberType里
  44. }

3.使用vuex对tabBar列表数据进行一个存储赋值

index.js↓

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. import tabBar from './modules/tabBar'
  4. Vue.use(Vuex)
  5.  
  6. const store = new Vuex.Store({
  7. 	modules:{tabBar},
  8. 	state: {
  9. 	
  10. 	},
  11. 	getters: {
  12. 		tabBarList: state => state.tabBar.tabBarList,
  13. 		isMemberType: state => state.tabBar.isMemberType,
  14. 	},
  15. 	mutations: {
  16. 		
  17. 	}
  18. })
  19.  
  20. export default store

tabBar.js↓

  1. import tarBarUserType from '@/utils/tabBar.js';
  2.  
  3. const tabBar = {
  4. 	state: {
  5. 		// 判断当前权限
  6. 		isMemberType: '',
  7. 		// tabbar列表数据
  8. 		tabBarList: []
  9.  
  10. 	},
  11. 	mutations: {
  12. 		setType(state, isMemberType) {
  13. 			state.isMemberType = isMemberType;
  14. 			state.tabBarList = tarBarUserType[isMemberType];//根据权限取出对应的tabBar
  15. 			console.log(state.tabBarList )
  16. 		}
  17. 	}
  18. }
  19.  
  20. export default tabBar;
  21.

创建一个tabBar组件↓

 代码↓

  1. <template>
  2. 	<view class="tab-bar">
  3. 		<view class="content">
  4. 			<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
  5. 				<view>
  6. 					<view class="tab-img">
  7. 						<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
  8. 						<image v-else class="img" :src="item.iconPath"></image>
  9. 					</view>
  10. 				</view>
  11. 				<view class="tit">{{ item.text }}</view>
  12. 			</view>
  13. 		</view>
  14. 	</view>
  15. </template>
  16.  
  17. <script>
  18. 	export default {
  19. 		props: {
  20. 			// 底部导航栏数据
  21. 			tabBarList: {
  22. 				type: Array,
  23. 				required: true
  24. 			},
  25. 			// 当前页面路径
  26. 			routePath: {
  27. 				type: String,
  28. 				required: true
  29. 			}
  30. 		},
  31. 		data() {
  32. 			return {};
  33. 		},
  34. 		methods: {
  35. 			selectTabBar(path) {
  36. 			
  37. 				// console.log(path)
  38. 				uni.switchTab({
  39. 					url: path
  40. 				})
  41. 			}
  42. 		},
  43. 		onLoad() {
  44. 			// console.log(this.tabBarList)
  45. 		}
  46. 	};
  47. </script>
  48.  
  49. <style lang="scss">
  50. 	.tab-bar {
  51. 		position: fixed;
  52. 		bottom: 0;
  53. 		left: 0;
  54. 		width: 100vw;
  55. 		padding: 0rpx;
  56. 		// padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
  57. 		// padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
  58. 		background-color: #fff;
  59. 		// background-color: red;
  60. 		// height:80rpx;
  61.  
  62.  
  63. 		.content {
  64. 			display: flex;
  65. 			flex-direction: row;
  66.  
  67. 			.one-tab {
  68.  
  69. 				display: flex;
  70. 				flex-direction: column;
  71. 				align-items: center;
  72. 				width: 100%;
  73. 				// background-color: pink;
  74.  
  75. 				.tab-img {
  76. 					width: 50rpx;
  77. 					height: 50rpx;
  78.  
  79. 					.img {
  80. 						width: 100%;
  81. 						height: 100%;
  82. 					}
  83. 				}
  84.  
  85. 				.tit {
  86. 					font-size: 25rpx;
  87. 					transform: scale(0.7);
  88. 				}
  89. 			}
  90. 		}
  91. 	}
  92. </style>

5.在存在tabbar的页面中都需要引入组件，并传相关数据（routePath传入当前页面的tabbar路径）

  1. <template>
  2. 	<view class="content">
  3. 		卸船指令
  4. 		
  5. 		<tabBarAction :tabBarList='tabBarList' routePath='/pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand'>
  6. 		</tabBarAction>
  7. 	</view>
  8. </template>
  9.  
  10. <script>
  11. 	import {
  12. 		mapGetters,
  13. 		mapState
  14. 	} from 'vuex';
  15. 	import tabBarAction from '@/components/tabBarAction/tabBarAction'
  16.  
  17. 	export default {
  18. 		data() {
  19. 			return {
  20.  
  21. 			};
  22. 		},
  23. 		computed: {
  24. 			// 这里的tabBarList就是数据源，直接使用传值
  25. 			...mapGetters(['tabBarList'])
  26. 		},
  27. 		components: {
  28. 			tabBarAction
  29.  
  30. 		},
  31. 	}
  32. </script>
  33.  
  34.  
  35. <style lang="scss" scoped>
  36. 	.content {
  37. 		margin-top: 100rpx;
  38. 		height: 100%;
  39.  
  40.  
  41. 	}
  42. </style>

6.在需要的地方配置权限：↓

  1. this.$store.commit('setType', tabbar路径);
  2.                 uni.switchTab({
  3.                     url:tabbar路径
  4.                 })

7.在app.vue 里面隐藏tabBar

  1. 		onShow() {
  2. 			uni.hideTabBar({});
  3. 		},

本文参照，重新丰满过程↓

小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)_uniapp动态设置tabbar_别改我bug的博客-CSDN博客

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/89791
推荐阅读