小程序自定义tabbar导航栏及动态控制tabbar功能实现方法(uniapp)

目录1.首先我们需要在pages.json配置tabbar2.我们需要配置tabbar列表，根据角色的不同设置不同的tabbar列表数据3.使用vuex对tabBar列表数据进行一个存储赋值4.需要自...

目录

uniapp开发小程序，不同角色/已登录未登录，都有不一样的底部导航栏，这些情况下就需要自行定义tabbar，从而实现动态tabbar的实现。

1.首先我们需要在pages.json配置tabbar

我这里并没有开启custom(自定义)，不开启的话，他在页面是有占位的，那就需要在页面进行隐藏,后面会讲到;

这里是直接给一个路径就可以，用于后期使用uni.switchtab(OBJECT)进行跳转

"tabBar": {
// "custom": true,
"list": [{
"pagePath": "pages/home/index"
},
{
"pagePath": "pages/personal/index"
},
{
"pagePath": "pages/personal/notMemberIndex"
}
]
}

2.我们需要配置tabbar列表，根据角色的不同设置不同的tabbar列表数据

我是登录的用户跟未登录的用户是不同的tabbar的一个显示;

重点: ！！ 这里的text，pagePath，iconPath， selectedIconPath，这四个命名必须跟pages.json里面tabBar配置的原始命名一致，否则会出问题！！

// 已登录
const member = [{
"text": "首页",
"pagePath": "/pages/home/index",
"iconPath": require("@/static/home.png"),
"selectedIconPath": require("@/static/homeSelect.png")
},
{
"text": "个人中心",
"pagePath": "/pages/personal/index",
"iconPath": require("@/static/personal.png"),
"selectedIconPath": require("@/static/personalSelect.png")
}
]

// 未登录
const notMember = [{
"text": "山姆会员商城",
"pagePath": "/pages/home/index",
"iconPath": require("@/static/home.png"),
"selectedIconPath": require("@/static/homeSelect.png")
},
{
"text": "成为会员",
"pagePath": "/pages/personal/notMemberIndex",
"iconPath": require("@/static/notMember.png"),
"selectedIconPath": require("@/static/notMemberSelect.png")
}
]

export default {
member,
notMember
}

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

tabBar.js

对数据进行一个存储，赋值

onShow() {
uni.hideTabBar({});
if (getUserWxInfo('user_info')) {
this.$store.commit('setType', 'member');
} else {
this.$store.commit('setType', 'notMember');
}
}