uniapp写app之uniApp自定义tabBar导航
新建组件tabbar组件
自定义一个tabbar导航,动态tabbar导航,在需要tabbar的页面引入tabbar组件,跳转到不同系统有不同tabbar导航我这里是后端设置字段控制的,ios和android进入不同系统。
// An highlighted block
<template>
<view class="tab-bar-box">
<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>
</view>
</template>
<script>
import { mapGetters } from 'vuex';
import {appNavBer,shopNavber} from '@/config/tabBar.js';
export default {
props: {
// 当前页面路径
routePath: {
type: String,
required: true
},
},
data() {
return {
tabBarList: [],
appNavBer: appNavBer,
shopNavber: shopNavber,
};
},
created() {
if (this.$appName == 'app') {
this.tabBarList = this.appNavBer
} else {
this.tabBarList = this.shopNavber
}
},
methods: {
selectTabBar(path) {
if (path==this.routePath) return
if (this.$appName == 'app') {
uni.switchTab({
url:path
})
} else {
uni.reLaunch({
url: path
})
}
}
}
};
</script>
<style lang="less">
.tab-bar-box {
height: 100rpx;
}
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
padding: 20rpx;
padding-bottom: 0;
padding-bottom: 0;
background-color: #fff;
.content {
display: flex;
.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: 24rpx;
transform: scale(0.7);
}
}
}
}
</style>
在父组件中使用
引入父组件中
<template>
<view>
<tabbar routePath="/pages/index/index"></tabbar>
</view>
</template>
<script>
import tabbar from '@/components/tabbar.vue'
export default {
components: {
tabbar,
},
onLoad() {
//隐藏原有tabbar
uni.hideTabBar()
},
}
</script>