uniapp 自定义底部导航栏以及初次点击页面闪烁

直接上代码吧

我的目录

在tabbar.vue中封装底部导航栏组件

<template>
	<view>
		<view class="tabbar">
			<view class="navigator">
				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
					@click="changeItem(item)">
					<image :src="item.selectedIconPath" class="icon" mode="widthFix" v-if="currentPage == index" />
					<image :src="item.iconPath" class="icon" mode="widthFix" v-else />
					<text :class="['item-text',{'text-active':currentPage == index}]">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ['currentPage'],
		data() {
			return {
				tabBar: {
					list: [{
							"id": 0,
							"pagePath": "/pages/examineapprove/orderapproval",
							"text": "订单",
							"iconPath": "../../static/tabbar/order.png",
							"selectedIconPath": "../../static/tabbar/order_active.png"
						},
						{
							"id": 1,
							"pagePath": "/pages/jurisdiction/jurisdictionCustomer",
							"text": "客户",
							"iconPath": "../../static/tabbar/custorm.png",
							"selectedIconPath": "../../static/tabbar/custorm_active.png"
						},
						{
							"id": 2,
							"pagePath": "/pages/homePage/index",
							"text": "",
							"iconPath": "../../static/tabbar/menu.png",
							"selectedIconPath": "../../static/tabbar/menu.png",
						},
						{
							"id": 3,
							"pagePath": "/pages/examineapprove/returnapproval",
							"text": "退货",
							"iconPath": "../../static/tabbar/return.png",
							"selectedIconPath": "../../static/tabbar/return_active.png"
						},
						{
							"id": 4,
							"pagePath": "/pages/mine/index",
							"text": "我的",
							"iconPath": "../../static/tabbar/mine.png",
							"selectedIconPath": "../../static/tabbar/mine_active.png"
						}
					]
				},
				currentItem: 0
			}
		},
		onLoad() {},
		mounted() {
			uni.hideTabBar();
		},
		methods: {
			changeItem(item) {
				let _that=this;
				_that.currentItem=item.id;
				_that.$emit('changeItem',item)
			}
		}
	}
</script>
<style>
	.item-text {
		color: #DDDDE3;
		font-size: 26rpx;
	}
	.text-active {
		font-size: 26rpx;
		color: #1296db;
	}
	.tabbar {
		width: 100%;
		height: 130rpx;
		padding-top: 28rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		z-index: 100;
		border-radius: 20rpx 20rpx 10rpx 0rpx;
		position: fixed;
		bottom: 0px;
		font-size: 20rpx;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);	/* 设置边框阴影 */
	}
	.navigator {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.navigator-item {
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		z-index: 1000;
	}
	.navigator-item image {
		width: 50rpx;
		height: 50rpx;
	}
	.navigator-item:nth-child(3) image {
		position: absolute;
		top: -45rpx;
		width: 85rpx;
		height: 85rpx;
	}
</style>

然后页面引入

<template>
	<view>
	//current-page则表示选中的状态，例如当前是首页则为0,如果是第三页则为2
		<tabbar :current-page='0'></tabbar>
		<view class="">订单审批</view>
	</view>
</template>
<script>
	import tabbar from '../../components/tabbar.vue';
	export default {
		components: {
			tabbar
		},
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		methods: {}
	}
</script>

pages.json中配置

	{
	"pages": [
		{
			"path": "pages/examineapprove/orderapproval",
			"style": {
				"navigationBarTitleText": "订单审批",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/jurisdiction/jurisdictionCustomer",
			"style": {
				"navigationBarTitleText": "客户管理",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/homePage/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/examineapprove/returnapproval",
			"style": {
				"navigationBarTitleText": "退货审批",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "我的",
				"navigationStyle": "custom"
			}
		},
	],
	"tabBar": {
		"custom": true,
		"backgroundColor": "#F3F2F0",
		"borderStyle": "white",
		"display": "none",
		"list": [{
				"pagePath": "pages/examineapprove/orderapproval",
				"text": ""
			},
			{
				"pagePath": "pages/jurisdiction/jurisdictionCustomer",
				"text": ""
			},
			{
				"pagePath": "pages/examineapprove/returnapproval",
				"text": ""
			},
			{
				"pagePath": "pages/homePage/index",
				"text": ""
			},
			{
				"pagePath": "pages/mine/index",
				"text": ""
			}
		]
	},
}

下面解决初次点击页面闪烁问题

先建一个主页面firstPage.vue，将所有tabbar页面引入

<template>
	<view>
		<view class="main_box">
			<orderapproval v-if="currentIndex === 0"></orderapproval>
			<jurisdictionCustomer v-if="currentIndex === 1"></jurisdictionCustomer>
			<homePage v-if="currentIndex === 2"></homePage>
			<returnapproval v-if="currentIndex === 3"></returnapproval>
			<mine v-if="currentIndex === 4"></mine>
		</view>
		<view class="foot_box">
			<tabbar :current-page="currentIndex" @changeItem="changeItem"></tabbar>
		</view>
	</view>
</template>
<script>
	import orderapproval from '@/pages/examineapprove/orderapproval.vue'
	import jurisdictionCustomer from '@/pages/jurisdiction/jurisdictionCustomer.vue'
	import homePage from '@/pages/homePage/index.vue'
	import returnapproval from '@/pages/examineapprove/returnapproval.vue'
	import mine from '@/pages/mine/index.vue'
	import tabbar from '../../components/tabbar.vue';
	export default {
		components: {
			orderapproval,
			jurisdictionCustomer,
			homePage,
			returnapproval,
			mine,
			tabbar
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		onLoad() {},
		methods: {
			changeItem(item) {
				this.currentIndex = item.id
			},
			open() {}
		}
	}
</script>
<style lang="scss" scoped>
	.main_box {
		height: calc(100vh - 110rpx);
		overflow: scroll;
	}
	.foot_box {
		height: 110rpx;
	}
</style>

然后将主页面放到pages.json的第一个，作为入口文件

到这里就可以把pages.json中的tabbar整个就可以删除了
pages.json完整代码

{
	"pages": [
		{
			"path": "pages/firstPage/firstPage",
			"style": {
				"navigationBarTitleText": "",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/examineapprove/orderapproval",
			"style": {
				"navigationBarTitleText": "订单审批",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/jurisdiction/jurisdictionCustomer",
			"style": {
				"navigationBarTitleText": "客户管理",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/homePage/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/examineapprove/returnapproval",
			"style": {
				"navigationBarTitleText": "退货审批",
				"navigationStyle": "custom"
			}
		},
		{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "我的",
				"navigationStyle": "custom"
			}
		},
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

到这里就结束了，目前这种方式，还没遇到什么问题。