uniapp アプレットは、権限に基づいてタブバーを動的に生成します。
導入
小規模なプログラムを開発する場合、一部のプロジェクトでは、ロールの権限に基づいてタブバーを動的に生成する必要がある状況が発生します。そのため、開発者はタブバー コンポーネントを自分で定義する必要があります。タブバーの数は 5 を超えてはなりません。
タブバーコンポーネントをカプセル化する
1. コンポーネントディレクトリでコンポーネントを定義します。
<template>
<view class="uni-tabbar">
<view class="uni-tabbar-item" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item)">
<view class="uni-tabbar-bd">
<view class="uni-tabbar-icon">
<image v-if="item.pagePath == pagePath" class="icon-img" mode="aspectFit" :src="validateHttp(item.selectedIconPath)" />
<image v-else class="icon-img" mode="aspectFit" :src="validateHttp(item.iconPath)" />
</view>
</view>
<view class="uni-tabbar-label" :class="{ active: item.pagePath === pagePath }">{
{ item.text }}</view>
</view>
</view>
</template>
<script>
import {
mapGetters } from 'vuex';
import {
isHttpOrHttps } from '@/utils/replace.js';
export default {
props: {
// 当前页面路径
pagePath: {
type: String,
required: true
},
// tabbar 底部导航栏数据
tabbar: {
type: Array,
required: true
}
},
computed: {
...mapGetters(['tabBarList'])
},
// watch: {
// pagePath: {
// handler(val) {
// // console.log('pagePath监听===val', val);
// },
// immediate: true
// }
// },
methods: {
// 检验拼接url地址
validateHttp(url) {
return isHttpOrHttps(url);
},
changeTab(item) {
this.page = item.pagePath;
uni.switchTab({
url: this.page });
this.$emit('onTabTap');
}
}
};
</script>
<style lang="scss" scoped>
.uni-tabbar {
position: fixed;
bottom: 0;
z-index: 50;
width: 100%;
display: flex;
justify-content: space-around;
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
border-top: solid 1rpx #dddddd;
background-color: #fff;
.uni-tabbar-item {
width: 25%;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.uni-tabbar-icon {
height: 64rpx;
}
.icon {
display: inline-block;
}
.uni-tabbar-label {
line-height: 24rpx;
font-size: $font-size-sm;
color: $color;
&.active {
font-weight: 600;
}
}
.icon-img {
width: 64rpx;
height: 64rpx;
}
}
</style>
2. 権限に基づいてタブバーデータを定義する
let BUYER = [
{
text: "推荐",
pagePath: '/pages/common/recommend/index',
iconPath: "wxapp-img/icon/ic_tuijian.png",
selectedIconPath: "wxapp-img/icon/ic_tuijian_n.png",
},
{
text: "关注",
pagePath: '/pages/common/brandFollow/index',
iconPath: "wxapp-img/icon/ic_guanuzhu.png",
selectedIconPath: "wxapp-img/icon/ic_guajnzhu_n.png",
},
{
text: "订单",
pagePath: '/pages/buyer/order/index',
iconPath: "wxapp-img/icon/ic_dingdan.png",
selectedIconPath: "wxapp-img/icon/ic_dingdan_n.png",
},
{
text: "我的",
pagePath: '/pages/common/mine/index',
iconPath: "wxapp-img/icon/ic_wode.png",
selectedIconPath: "wxapp-img/icon/ic_wode_n.png",
},
]
let SHOP_MANAGER = [
{
text: "推荐",
pagePath: '/pages/common/recommend/index',
iconPath: "wxapp-img/icon/ic_tuijian.png",
selectedIconPath: "wxapp-img/icon/ic_tuijian_n.png",
},
{
text: "关注",
pagePath: '/pages/common/brandFollow/index',
iconPath: "wxapp-img/icon/ic_guanuzhu.png",
selectedIconPath: "wxapp-img/icon/ic_guajnzhu_n.png",
},
{
text: "采购车",
pagePath: '/pages/manager/car/index',
iconPath: "wxapp-img/icon/ic_caigouche.png",
selectedIconPath: "wxapp-img/icon/ic_caigoouche_n.png",
},
{
text: "我的",
pagePath: '/pages/common/mine/index',
iconPath: "wxapp-img/icon/ic_wode.png",
selectedIconPath: "wxapp-img/icon/ic_wode_n.png",
},
]
export default {
BUYER,
SHOP_MANAGER
}
3. vuex でロールのタブバー データを取得する
// modules/tabBar.js
import tabbar from '@/utils/tabbar.js'
const tabBar = {
state: {
role: '',
tabBarList: [],
},
mutations: {
setRole(state, role) {
state.role = role;
state.tabBarList = tabbar[role];
}
},
}
export default tabBar
// getters.js
const getters = {
tabBarList: state => state.tabBar.tabBarList,
role: state => state.tabBar.role
}
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;
4. インターフェイスがロール ID または権限データを返したら、vuex の tabBarList を設定します。
5.必要なすべてのページにコンポーネントを導入します
...
<tab-bar :tabbar="tabBarList" :pagePath="routerPath"/>
...
<script>
import {
mapGetters } from 'vuex';
import TabBar from '@/components/TabBar/index.vue';
export default {
data() {
return {
// 获取当前页面路径
routerPath: '/' + this.$mp.page.route,
};
},
computed: {
...mapGetters(['tabBarList'])
},
components: {
TabBar
},
onShow() {
// 隐藏原生tabbar
uni.hideTabBar({
});
},
}
</script>
6. App.vueにオペレーションを追加する
onShow() {
// 隐藏原生tabbar
uni.hideTabBar({
});
},
7. タブバーデータをpages.jsonに追加します。
// 根据权限路径去重，把所有的 tabbar 路径添加进去，记得不得超过5个
"tabBar": {
"list": [{
"pagePath": "pages/common/recommend/index"
},
{
"pagePath": "pages/common/brandFollow/index"
},
{
"pagePath": "pages/buyer/order/index"
},
{
"pagePath": "pages/common/mine/index"
},
{
"pagePath": "pages/manager/car/index"
}
]
},
この方法もネットでの情報検索や私のプロジェクトの状況を踏まえて修正したものなので、間違いがあればご指摘いただけると幸いです。
最後に、pages.json の tabBar データは 5 を超えることができないことに注意してください。5 を超える必要がある場合は、完全にカスタマイズする必要があります。ジャンプするページがタブバー ページの場合は、uni.reLaunch() メソッドのみを使用できます。そして必要はありません。次に、pages.json で tabBar パスを構成します。！！