在项目中遇到一个需求,根据不同的账号,生成不同的tabBar,刚开始考虑使用父组件中引入子组件的形式,奈何页面空白,什么也不显示于是,考虑使用自定义的tabbar实现。
项目技术:uniapp开发微信小程序,配合UView组件
Uview中有tabBar组件:官网地址
使用UView配合Vuex自定义tabBar成功解决问题,附上教程:
0、仅需配置tabBar中list属性中各页面的路径:
"tabBar": {
"list": [{
"pagePath": "pages/A/A"
}, {
"pagePath": "pages/B/B"
}, {
"pagePath": "pages/C/C"
}]
},
1、创建自定义的tabBar文件: tabBar.js,我放在了utils路径下,各位请随意
const testABar= [
// 首页
{
// 未点击图标
iconPath: "/static/img/tab/home.png",
// 点击后图标
selectedIconPath: "/static/img/tab/home-active.png",
// 显示文字
text: '人员列表',
// 是否显示红点
isDot: true,
// 是否使用自定义图标
customIcon: true,
// 页面路径
pagePath: "/pages/A/A"
}, {
iconPath: "/static/img/tab/user.png",
selectedIconPath: "/static/img/tab/user-active.png",
text: '我的',
isDot: true,
customIcon: true,
pagePath: "/pages/B/B"
}
// 省略
]
const testBBar= [
// 首页
{
// 未点击图标
iconPath: "/static/img/tab/home.png",
// 点击后图标
selectedIconPath: "/static/img/tab/home-active.png",
text: '车辆列表',
isDot: true,
customIcon: true,
pagePath: "/pages/C/C"
}, {
iconPath: "/static/img/tab/user.png",
selectedIconPath: "/static/img/tab/user-active.png",
text: '我的',
isDot: true,
customIcon: true,
pagePath: "/pages/D/D"
}
// 省略
]
export default {
testABar,
testBBar
}
2、配置Vuex
文件目录:
tabBer.js 文件内容:
import tabBer from '@/utils/tabBer.js'
// tabBar文件为我们创建的tabBer对象数组
// 判断用户tabBer类别, 例如
// 逻辑判断处理
let type = uni.getStorageSync('userInfo').id < 2 ? 'testABar' : 'testBBar'
// midBtn 为设置tabBer中间的凸起,false为不凸起
const state = {
list: tabBer[type],
midBtn: type === 'staffBar' ? false : false,
}
const mutations = {
}
export default {
namespaced: true,
state,
mutations
}
3、getters.js 文件内容:
const getters = {
tabBerList: state => state.tabBer.list,
midBtn: state => state.tabBer.midBtn
}
export default getters
4、index.js 文件内容
import Vue from 'vue'
import Vuex from 'vuex'
import tabBer from './modules/tabBer'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
tabBer
},
getters
})
export default store
5、在创建上面的所有文件之后,我们就可以通过vueX得到两份不同的tabBar对象数组了,接下来我们在每个tabBar对应页面引入,如下
<template>
<view class="content">
<view class="main-box">
测试A
</view>
<u-tabbar
:list="tabBerList"
:mid-button="midBtn"
active-color="#5098FF"
inactive-color="#909399"
border-top="false"
bg-color = "#F8F8F8"
></u-tabbar>
</view>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
}
},
computed: {
...mapGetters([
'tabBerList',
'midBtn'
])
}
}
</script>
<style scoped lang="scss">
</style>
然后,大功告成
最后,首先感谢大佬指点迷津,,附上链接:https://blog.csdn.net/fuyuumiai/article/details/109746357