整体思路是保留原来的tabbar路径，然后根据用户身份不同，选择对应的JS数据覆盖tabbar。
1、tabBarList除了路径，其他全部为空
2、创建Js文件，不同身份需要的数组
// 已登录
const member = [
// {
// "pagePath": "/pages/index", //页面路径，必须在 pages 中先定义
// "iconPath": require("@/static/images/tabbar/index.png"), //建议尺寸为 81px * 81px
// "selectedIconPath": require("@/static/images/tabbar/indexHL.png"), //建议尺寸为 81px * 81px
// "text": "主页" //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
// },
{
"pagePath": "/pages/index/middle",
"iconPath": require("@/static/images/tabbar/category.png"),
"selectedIconPath": require("@/static/images/tabbar/categoryHL.png"),
"text": "商场"
},
{
"pagePath": "/pages/index/rightside",
"iconPath": require("@/static/images/tabbar/find.png"),
"selectedIconPath": require("@/static/images/tabbar/findHL.png"),
"text": "发现"
},
{
"pagePath": "/pages/ber/nullPage1/nullPage1",
"iconPath": require("@/static/images/tabbar/cart.png"),
"selectedIconPath": require("@/static/images/tabbar/cartHL.png"),
"text": "购物车"
},
{
"pagePath": "/pages/ber/nullPage2/nullPage2",
"iconPath": require("@/static/images/tabbar/user.png"),
"selectedIconPath": require("@/static/images/tabbar/userHL.png"),
"text": "我的"
}
]
// 未登录
const notMember = [
{
"pagePath": "/pages/index/index", //页面路径，必须在 pages 中先定义
"iconPath": require("@/static/images/tabbar/index.png"), //建议尺寸为 81px * 81px
"selectedIconPath": require("@/static/images/tabbar/indexHL.png"), //建议尺寸为 81px * 81px
"text": "主页" //菜单上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
},
{
"pagePath": "/pages/index/middle",
"iconPath": require("@/static/images/tabbar/category.png"),
"selectedIconPath": require("@/static/images/tabbar/categoryHL.png"),
"text": "商场"
},
{
"pagePath": "/pages/index/rightside",
"iconPath": require("@/static/images/tabbar/find.png"),
"selectedIconPath": require("@/static/images/tabbar/findHL.png"),
"text": "发现"
},
{
"pagePath": "/pages/ber/nullPage1/nullPage1",
"iconPath": require("@/static/images/tabbar/cart.png"),
"selectedIconPath": require("@/static/images/tabbar/cartHL.png"),
"text": "购物车"
},
{
"pagePath": "/pages/ber/nullPage2/nullPage2",
"iconPath": require("@/static/images/tabbar/user.png"),
"selectedIconPath": require("@/static/images/tabbar/userHL.png"),
"text": "我的"
}
]
export default {
member,
notMember
}
3、main.js引入store。创建文件
import store from './store';
Vue.prototype.$store = store; //挂载在 Vue 实例上
4、在store 存储不同身份需要的数据
有点基础的应该看懂了
tabBar.js
import tarBarUserType from '@/until/tabBar.js';
const tabBar = {
state: {
// 判断是否已登录(member/notMember)
isMemberType: '',
// tabbar列表数据
tabBarList: []
},
mutations: {
setType(state, isMemberType) {
state.isMemberType = isMemberType;
state.tabBarList = tarBarUserType[isMemberType];
}
}
}
export default tabBar;
getters.js
const getters = {
tabBarList: state => state.tabbar.tabBarList,
//tabBarList: function tabBarList(state) {
// return state.tabBar.tabBarList;
// },
isMemberType: state => state.tabbar.isMemberType,
}
export default getters
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import tabbar from './modules/tabbar.js'
import getters from './getters.js'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
tabbar,
},
getters
});
export default store;
5、在确定用户身份的接口，存储关键Id到本地。APP.vue，根据关键Id传数组参数去Store
登录获取，用户身份接口
uni.setStorageSync('userId',res.data.usershop);
App.vue
onShow(){
uni.hideTabBar({});//隐藏自带tabbar
//如果有专门的验证登录成功与否的接口就更好了，拿接口的success和fail去做store的存储
if (uni.getStorageSync('userId')) {
this.$store.commit('setType', 'member');
} else {
this.$store.commit('setType', 'notMember');
}
}
6、创建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 {
name: 'TabBar',
props: {
// 底部导航栏数据
tabBarList: {
type: Array,
required: true
},
// 当前页面路径
routePath: {
type: String,
required: true
}
},
data() {
return {};
},
methods: {
selectTabBar(path) {
// console.log('11111' + path);
this.$emit('onTabBar', path);
// uni.switchTab({
// url:path
// })
}
}
};
</script>
<style lang="scss">
.tab-bar {
z-index: 9999;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding: 20rpx;
padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
background-color: #fff;
.content {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-around;
.one-tab {
display: flex;
flex-direction: column;
align-items: center;
// width: 50%;
.tab-img {
width: 50rpx;
height: 50rpx;
.img {
width: 100%;
height: 100%;
}
}
.tit {
// font-size: $font-size-base;
transform: scale(0.7);
}
}
}
}
</style>
7、在需要的页面引入tabBar组件
<tabBar :tabBarList="barList" routePath='/pages/index/index' @onTabBar="btn"></tabBar>
computed:{
barList(){
return this.$store.getters['tabBar/getBarList']
}
},
methods: {
btn(path) {
console.log('path :>> ', path);
uni.switchTab({
url:path
})
},
}
8、在启动页面设置tabBar的跳转
let urlTo
if(this.$store.getters['tabBarList']) {
urlTo = this.$store.getters['tabBarList'][0].pagePath
}else {
urlTo = '/pages/index'
}
console.log('urlTo :>> ', urlTo);
uni.switchTab({
url:urlTo
});
9、开发过程有个别问题单独拿出来说下
1、如果启动页，不是tabBarList里面某一页，需要在对应的启动页，uni.hideTabBar({});
2、因为是采取进入页面，隐藏tabBarLIst，然后把自定义tabBar生成，所以第一次进入页面有个闪烁的问题，目前还没找到较好的解决方法
10、说个h5的账号登录思维
1、登录成功存用户身份信息，跳页面
2、在新页面，接受用户信息，onload。如果有单独的用户身份信息接口获取就更好了
总之，新页面就是抓用户信息，然后设定store。
this.$store.commit('setType', 'member');
or
this.$store.commit('setType', 'notMember');
到这一步，回看步骤 5
