（装船权限）
（卸船权限）
1.首先我们需要在pages.json配置tabbar 和pages （配置所有tabbar路径）
"pages": [ //pages数组中第一项表示应用启动页,
{
"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselPlan",
"style": {
"navigationBarTitleText": "装船作业计划",
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
}, {
"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselCommand",
"style": {
"navigationBarTitleText": "装船指令",
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
}, {
"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselHistory",
"style": {
"navigationBarTitleText": "历史",
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
}, {
"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan",
"style": {
"navigationBarTitleText": "卸船作业计划",
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
}, {
"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand",
"style": {
"navigationBarTitleText": "卸船指令",
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
}, {
"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory",
"style": {
"navigationBarTitleText": "历史",
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
},
],
"tabBar": {
"color": "#7a7e83",
"selectedColor": "#0faeff",
"backgroundColor": "#ffffff",
// "custom": true,custom(自定义)，不开启的话，在页面是有占位的，就需要在页面进行隐藏
"list": [{
"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselPlan"
}, {
"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselCommand"
},
{
"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselHistory"
},
{
"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan"
}, {
"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand"
},
{
"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory"
}
]
},2.配置动态tabBar.js
如图↓
代码↓
// 装船权限
const loadVessel = [{
"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselPlan",
"text": "装船作业计划",
"iconPath": require("@/static/img/common/装船作业计划.png"),
"selectedIconPath": require("@/static/img/common/装船作业计划1.png")
}, {
"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselCommand",
"text": "装船指令",
"iconPath": require("@/static/img/common/装船指令.png"),
"selectedIconPath": require("@/static/img/common/装船指令1.png")
},
{
"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselHistory",
"text": "历史",
"iconPath": require("@/static/img/common/历史.png"),
"selectedIconPath": require("@/static/img/common/历史1.png")
}
]
//卸船权限
const unloadVessel = [{
"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan",
"text": "卸船作业计划",
"iconPath": require("@/static/img/common/装船作业计划.png"),
"selectedIconPath": require("@/static/img/common/装船作业计划1.png")
}, {
"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand",
"text": "卸船指令",
"iconPath": require("@/static/img/common/装船指令.png"),
"selectedIconPath": require("@/static/img/common/装船指令1.png")
},
{
"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory",
"text": "历史",
"iconPath": require("@/static/img/common/历史.png"),
"selectedIconPath": require("@/static/img/common/历史1.png")
}
]
export default {
loadVessel,//装船权限名 最后要存入 isMemberType里
unloadVessel//卸船权限名 最后要存入 isMemberType里
}
3.使用vuex对tabBar列表数据进行一个存储赋值
index.js↓
import Vue from 'vue'
import Vuex from 'vuex'
import tabBar from './modules/tabBar'
Vue.use(Vuex)
const store = new Vuex.Store({
modules:{tabBar},
state: {
},
getters: {
tabBarList: state => state.tabBar.tabBarList,
isMemberType: state => state.tabBar.isMemberType,
},
mutations: {
}
})
export default store
tabBar.js↓
import tarBarUserType from '@/utils/tabBar.js';
const tabBar = {
state: {
// 判断当前权限
isMemberType: '',
// tabbar列表数据
tabBarList: []
},
mutations: {
setType(state, isMemberType) {
state.isMemberType = isMemberType;
state.tabBarList = tarBarUserType[isMemberType];//根据权限取出对应的tabBar
console.log(state.tabBarList )
}
}
}
export default tabBar;
创建一个tabBar组件↓
代码↓
<template>
<view class="tab-bar">
<view class="content">
<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
<view>
<view class="tab-img">
<image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
<image v-else class="img" :src="item.iconPath"></image>
</view>
</view>
<view class="tit">{{ item.text }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 底部导航栏数据
tabBarList: {
type: Array,
required: true
},
// 当前页面路径
routePath: {
type: String,
required: true
}
},
data() {
return {};
},
methods: {
selectTabBar(path) {
// console.log(path)
uni.switchTab({
url: path
})
}
},
onLoad() {
// console.log(this.tabBarList)
}
};
</script>
<style lang="scss">
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding: 0rpx;
// padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
// padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
background-color: #fff;
// background-color: red;
// height:80rpx;
.content {
display: flex;
flex-direction: row;
.one-tab {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
// background-color: pink;
.tab-img {
width: 50rpx;
height: 50rpx;
.img {
width: 100%;
height: 100%;
}
}
.tit {
font-size: 25rpx;
transform: scale(0.7);
}
}
}
}
</style>
5.在存在tabbar的页面中都需要引入组件，并传相关数据（routePath传入当前页面的tabbar路径）
<template>
<view class="content">
卸船指令
<tabBarAction :tabBarList='tabBarList' routePath='/pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand'>
</tabBarAction>
</view>
</template>
<script>
import {
mapGetters,
mapState
} from 'vuex';
import tabBarAction from '@/components/tabBarAction/tabBarAction'
export default {
data() {
return {
};
},
computed: {
// 这里的tabBarList就是数据源，直接使用传值
...mapGetters(['tabBarList'])
},
components: {
tabBarAction
},
}
</script>
<style lang="scss" scoped>
.content {
margin-top: 100rpx;
height: 100%;
}
</style>
6.在需要的地方配置权限：↓
this.$store.commit('setType', tabbar路径);
uni.switchTab({
url:tabbar路径
})7.在app.vue 里面隐藏tabBar
onShow() {
uni.hideTabBar({});
},本文参照，重新丰满过程↓文章来源：https://www.toymoban.com/news/detail-675986.html
小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)_uniapp动态设置tabbar_别改我bug的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-675986.html
到了这里，关于uniapp 动态tabBar（全过程包含vuex 组件 配置等）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
