gas-cylinder-h5/components/x-navbottom.vue

<template>
	<!-- 底部tabbar -->
	<view class="navmainbox">
		<view class="navigation">
			<view class="navcont" v-for="(item,index) in list" :key="index" @click="gonavs(item,index)">
				<span class="iconfont icon_image" :class="[item.icon,nowchos == index ? 'activeName' :'']"></span>
				<view class="navchosbox" :class="nowchos == index ? 'activeName' :''">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- //防止 固定的底部菜单遮挡页面上的内容 -->
		<view class="navmainbox" style="position: relative;opacity: 0;z-index: 0;">
		</view>
	</view>
</template>

<script>
	export default {
		name: 'x-navbottom',
		props: {
			nowchos: {
				type: Number,
				default () {
					return 0
				}
			},
		},
		data() {
			return {
				dataList: [],
				list: [{
					icon: 'icon-shouye',
					title: '首页',
				}, {
					icon: 'icon-dingdan',
					title: '订单',
				}, {
					icon: 'icon-a-xiaoxi',
					title: '消息',
				}, {
					icon: 'icon-wode',
					title: '我的',
				}],
			}
		},
		mounted() {
		},
		methods: {
			gonavs(e, cindex) {
				this.$emit('botomchos', cindex)
			}
		}
	}
</script>

<style lang="scss">
	.navmainbox {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 5;
		background-color: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		width: 100%;
		height: 100rpx;
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
	}

	.navigation {
		z-index: 2024;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		padding-bottom: var(--window-bottom);
	}

	.navigation .navcont {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.navchosbox {
		color: #727289 !important;
		margin-top: 2rpx;
		font-size: 26rpx;
	}

	.activeName {
		color: #3E80FF !important;
	}

	.icon_image {
		font-size: 44rpx;
	}
</style>