dccloud/uni-app-front/components/page-foot.vue

<template>
	<!-- 底部导航开始 /////////////////////////////////////////////////////////////-->
	<!-- is_lhp判断是否为刘海屏在main.js里，好像uniapp有一个css变量获取刘海屏的安全区域 -->
	<view class="tabBar" :style="{height:is_lhp?'140rpx':'98rpx'}" v-show="isShow">
		<!-- 导航的中间圆圈 -->
		<view class="border_box" :style="{paddingBottom:is_lhp?'40rpx':''}">
			<view class="tabBar_miden_border"></view>
		</view>
		<view class="tabBar_list" :style="{paddingBottom:is_lhp?'40rpx':''}">
			<view v-for="(item) in tab_nav_list" :key="item.id" :class="{'tabBar_item':item.id!=2,'tabBar_item2':item.id==2}"
			 @tap="cut_index(item.id)">
				<image v-if="show_index == item.id" :src="`/static/tabBar/${item.id+1}${item.id+1}.png`"></image>
				<image v-else :src="`/static/tabBar/${item.id+1}.png`"></image>
				<view :class="{'tabBar_name':true,'nav_active':show_index == item.id}">{{item.name}}</view>
			</view>
		</view>
	</view>
	<!-- 底部导航结束 /////////////////////////////////////////////////////////////-->
</template>

<script>
	export default {
		props: {
		  //是否显示底部导航
		  isShow: {
		    type: Boolean,
		    default: true
		  },
		 
		  //底部导航栏哪个高亮显示
		  showIndex: {
		    type: Number,
		    default: 0
		  },
		 
		   
		},
		data() {
			return {
				/* 底部导航 */
				show_index: 0, //控制显示那个组件
				tab_nav_list: [{
					'id': 0,
					'name': '首页'
				}, {
					'id': 1,
					'name': '签证申请'
				}, {
					'id': 2,
					'name': '入库单'
				}, {
					'id': 3,
					'name': '领料单'
				}, {
					'id': 4,
					'name': '质量检查'
				}], //菜单列表
				is_lhp: false,
			}
		},
		created(){
			this.show_index=this.showIndex;
		},
		methods: {
			// 切换组件
			cut_index(type) {
				console.log('----------------------------------', type)
				let _this = this
				_this.show_index = type
				if (_this.show_index == 0) {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				} else if (_this.show_index == 1) {
					uni.navigateTo({
						url: '/pages/template/requisitionlist/requisitionlist'
					})
				} else if (_this.show_index == 2) {

					uni.navigateTo({
						url: '/pages/template/GetMaterialIns/GetMaterialIns'
					})
				} else if (_this.show_index == 3) {
					uni.navigateTo({
						url: '/pages/template/GetMaterialOuts/GetMaterialOuts'
					})

				} else if (_this.show_index == 4) {
					uni.navigateTo({
						url: '/pages/template/GetSafeQualityCheckDTOs/GetSafeQualityCheckDTOs?type=0'
					})

				}

			}

		}
	}
</script>
<style scoped>
	/* 底部导航 */
	.tabBar {
		width: 100%;
		height: 105rpx;
		background: #fff;
		border-top: 1px solid #E5E5E5;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.tabBar .tabBar_list {
		width: 98%;
		display: flex;
		justify-content: space-between;

	}

	.tabBar .tabBar_list image {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 2rpx
	}

	.tabBar .tabBar_list .tabBar_item {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 16rpx;
		color: #969BA3;
	}

	.tabBar .tabBar_list .tabBar_item2 {
		width: 25%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 16rpx;
		color: #969BA3;
		margin-top: -20rpx;
		position: relative;
		z-index: 101;

	}

	.tabBar .tabBar_list .tabBar_item2 image {
		width: 68rpx;
		height: 68rpx;
	}



	.border_box {
		// pointer-events: none; 事件穿透解决z-index层级问题
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0px;
		bottom: 50rpx;
		z-index: 100;
		pointer-events: none;

		.tabBar_miden_border {
			width: 100rpx;
			height: 50rpx;
			border-top: 2rpx solid #E5E5E5;
			border-radius: 50rpx 50rpx 0 0;
			/* 左上、右上、右下、左下 */
			background: #fff;
		}
	}

	.nav_active {
		color: #007AFF;
	}
</style>