dccloud/uni-app-front-second-directory/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)">
				 
				<i class="fa fa-home iconSize" aria-hidden="true"  v-if="0 == item.id"></i> 
				<image class="img bgWhite" mode="aspectFit" src="/static/icon/qianzhengshenqing.svg"    v-if="1 == item.id" ></image>
				<image class="img bgWhite" mode="aspectFit" src="/static/icon/in.svg"   v-if="2 == item.id" ></image>
				<image class="img bgWhite" mode="aspectFit" src="/static/icon/lingliao.svg" v-if="3 == item.id"/>
				 <image class="img bgWhite" mode="aspectFit" src="/static/icon/quality.svg" v-if="4 == item.id"/>
				<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 lang="scss" scoped>
	/* 底部导航 */
	.tabBar {
		width: 100%;
		height: 105rpx;
		background: $uni-bg-color-red;
		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: 30rpx;
		height: 30rpx;
		margin-bottom: 2rpx;
		margin-top:2rpx;
	}

	.tabBar .tabBar_list .tabBar_item {
		width: 25%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		 
		color: #fff;
	}

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

	}

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



	.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;
    	/* 左上、右上、右下、左下 */
    	 
    }
	.nav_active {
		font-size: 12px;
		color: #fff;
	}
	.tabBar_name{
		font-size: 12px;
		color:#fff;
	}
	.iconSize{
		font-size:18px;		
		padding-top:5px;
	}
	.bgWhite{
		border:#fff solid 1px;
		background-color: #fff;
	}
</style>