uniAPP·Vue已封装好的footer和Header

uniAPP·已封装好的footer和Header，已经作好 导航状态栏、刘海安全区、小程序胶囊安全区、手机底部物理键安全区，没有时自动为空

1【Header】

<template>
	<view>
		<view class="head-1">
			<!-- 小程序按钮安全高度 -->
			<view class="head-2 ">
				<!-- 一体 -->
				<view class="head-3" :style="{height:phoneHeight + 'px;'}"> </view> <!-- 系统状态栏安全高度 -->
				<view class="head-4"> </view> <!-- 设置刘海安全高度 -->
				<view class="head-5" :style="{height:menuTop}"> </view> <!-- 小程序按钮安全高度 -->
				<view style="width: auto;height: auto;padding-top: 24px;"></view>
			</view>
			<view class="head-view">
				<view class="head-Button translate" @tap="headButton()">
					 <slot name="slot1"></slot><!-- 父组件嵌入1 -->
				</view>
				<view>
					 <slot name="slot2"></slot><!-- 父组件嵌入2 -->
				</view>
			</view>
		</view>
		<!-- 内容安全区分割-->
		<view class="head-hr" :style="{height:phoneHeight+ 'px;'}">
			<view class="head-2">
				<view class="head-3"> </view>
				<view class="head-4"> </view>
				<view class="head-5" :style="{height:menuTop}"> </view>
				<view style="width: auto;height: auto;padding-top: 28px;"></view>
			</view>
			<view class="head-view" :style="{height:menuHeight}"> </view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
			
		},
		onInit(){//监听页面初始化
		// console.log("onInit ")
		},
		onLoad(){//监听页面加载
		// console.log("onLoad ")
		},
		onShow(){//监听页面每次显示
			// console.log("onShow ")
		},
		onReady(){//监听页面初次渲染完成
			
			// console.log("onReady")
		},
		methods: {
			
		},
		components: {
			
		}
	}
</script>

<style>
	
	/* env 屏幕刘海安全区 */
	/* padding-top: env(safe-area-inset-bottom); */
	/* padding-top: var(--status-bar-height); */
	
	.head-1 {
		width: 100%;
		overflow: auto;
		/* 置顶浮游定位 */
		position: fixed;
		padding-top: 2px;
		padding-bottom: 5px;
		z-index: 999;
		background-color: #108080;
	}
	.head-2 {/* 安全区高度包裹 */
		width: 100%;
		height: 100%;
	}
	.head-3 {/* 系统状态栏目安全区  动态高度 */
		width: 15%;
		float: left;
		height:var(--status-bar-height);
		/* padding-top:var(--status-bar-height); */
	}
	.head-4 {/* iPhone刘海安全区 */
		width: 25%;
		height: env(safe-area-inset-bottom);
		float: left;
	}
	.head-5 {/* 小程序胶囊 动态高度*/
		width: 15%;
		float: right;
	}
	
	.head-hr{
		/* 内容安全区 */
		width: 100%;
		height: auto;
		padding-bottom: 38px;
	}
	
	.head-view{
		width: 100%;
		float: left;
	}
	
	.head-Button {
		float: left;
		width: 29px;
		height: 28px;
		margin-left: 10px;
		margin-right: 10px;
		/* 弧度 */
		border-radius: 48px;
		/* 边框 */
		border: 1px solid #cccccc;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000000;
	}
	
	.head-Button image {
		width: 23px;
		height: 23px;
		border-radius: 50px;
		/* 弧度 */
	}
	
	.rotate :active {
		font-weight: bold;
		animation: rotate 1s infinite linear;
	}
	
	.translate :active {
		font-weight: bold;
		animation: translate 1s infinite linear;
	}
	
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
	
		to {
			transform: rotate(360deg);
		}
	}
	@keyframes translate {
		from {
			transform: translateX(-20%);
		}
	
		to {
			transform: translateX(5%);
		}
	}
	/* ============================================== */
	
	
</style>


2【使用说明】（需要先引入组件哦）slot=”slot1″ 是图标 和 slot=”slot2″ 是新内容

<view class="">
			<Head>
				<image slot="slot1" src="../../static/zuo.png"> </image>
				<picker slot="slot2" class="home-picker" @change="PickerLanguage" :range="dataLanguage">
					<image src="../../static/language1.png" mode=""> </image>
					<label> {{dataLanguage[intLanguage]}} </label>
				</picker>
			</Head>
			
		</view>

3【footer】底部导航（需要先引入组件哦）

<template>
	<!-- 需要多少个菜单就添加多少个 会自动自适应 -->
	<view class="footer_1">
		<view class="footer_1-1" @tap="GetFooter(0)">
			<view class="footer_1-1-t">
				<image :src="imgurl1"></image>
			</view>
			<view class="footer_1-1-b" :class="fontcolor1"> 主页 </view>
		</view>

		<view class="footer_1-1" @tap="GetFooter(1)">
			<view class="footer_1-1-t">
				<image :src="imgurl2"></image>
			</view>
			<view class="footer_1-1-b" :class="fontcolor2"> Dig Data </view>
		</view>

		<view class="footer_1-1" @tap="GetFooter(2)">
			<view class="footer_1-1-t">
				<image :src="imgurl3"></image>
			</view>
			<view class="footer_1-1-b" :class="fontcolor3"> Statistics </view>
		</view>

		<view class="footer_1-1" @tap="GetFooter(3)">
			<view class="footer_1-1-t">
				<image :src="imgurl4"></image>
			</view>
			<view class="footer_1-1-b" :class="fontcolor4"> Community </view>
		</view>

		<view class="footer_1-1" @tap="GetFooter(4)">
			<view class="footer_1-1-t">
				<image :src="imgurl5"></image>
			</view>
			<view class="footer_1-1-b" :class="fontcolor5"> 我的 </view>
		</view>
	</view>
</template>

<script>
	// import Home from './home.vue';
	
	export default {
		data() {
			return {
				
				imgurl1: '/static/home3.png',
				imgurl2: '/static/digdata3.png',
				imgurl3: '/static/Statistics3.png',
				imgurl4: '/static/community3.png',
				imgurl5: '/static/my3.png',

				fontcolor1: 'font-color-22',
				fontcolor2: 'font-color-22',
				fontcolor3: 'font-color-22',
				fontcolor4: 'font-color-22',
				fontcolor5: 'font-color-22',

				inFooter: 1,
				inFooter2: 0,
				
			}
			
		},
		onShow(){
			
		},
		
		methods: {
			getSwiper: function(e) {
				console.log("footer getSwiper：" + e);
				this.GetFooter(e);
			},
			GetFooter: function(e) {
				/* 刷空 */
				this.imgurl1 = '/static/home2.png';
				this.imgurl2 = '/static/digdata2.png';
				this.imgurl3 = '/static/Statistics2.png';
				this.imgurl4 = '/static/community2.png';
				this.imgurl5 = '/static/my2.png';

				this.fontcolor1 = 'font-color-22';
				this.fontcolor2 = 'font-color-22';
				this.fontcolor3 = 'font-color-22';
				this.fontcolor4 = 'font-color-22';
				this.fontcolor5 = 'font-color-22';
				/* 刷空 */
				
				if (e == 0) {
					this.inFooter = 0;
					this.imgurl1 = "/static/home1.png";
					this.fontcolor1 = 'font-color-00';
				} else if (e == 1) {
					this.inFooter = 1;
					this.imgurl2 = "/static/digdata1.png";
					this.fontcolor2 = 'font-color-00';
				} else if (e == 2) {
					this.inFooter = 2;
					this.imgurl3 = "/static/Statistics1.png";
					this.fontcolor3 = 'font-color-00';
				} else if (e == 3) {
					this.inFooter = 3;
					this.imgurl4 = "/static/community1.png";
					this.fontcolor4 = 'font-color-00';
				} else if (e == 4) {
					this.inFooter = 4;
					this.imgurl5 = "/static/my1.png";
					this.fontcolor5 = 'font-color-00';
				}
				// console.log("点击 inFooter：" + this.inFooter);

				/* 向父组件 提交数据 inFooter为方法名 */
				this.$emit('putFooter', this.inFooter);
				
			}

		},

		components: {

		}

	}
</script>

<style>
	
	.footer_1 {
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		
		width: 100%;
		height: 56px;
		/* 关闭切换动画效果 */
		duration: 0;
		
		/* 左右上下居中 */
		display: flex;
		justify-content: center;
		align-items: center;
		
		z-index: 1111;
		border-top: 1px dashed #999999;
		/* solid 实线 dashed 虚线*/
		/* 
			请到 pages.js 里的 "globalStyle"下添加如下代码, 
			"app-plus":{ "scrollIndicator":"none" } //全局 在APP页面都不显示滚动条
		 */
		
		/* 手机底部物理键安全区 */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom); 
	}
	
	.footer_1-1 {
		/* 模块 */
		margin-top: 3px;
		margin-bottom: 2px;
		float: left;
		width: 100%;
	}

	.footer_1-1-t {
		/* 图标 */
		width: 100%;
		height: 24px;
		/* 定位模块居中 */
		display: flex;
		justify-content: center;
	}

	.footer_1-1-t image {
		height: 25px;
		width: 24px;
	}

	.footer_1-1-b {
		/* 标题 */
		width: 100%;
		font-size: 12px;
		/* 字体大小 */
		font-weight: bolder;
		/* 字体变粗 */
		/* 文本上下居中 */
		display: flex;
		justify-content: center;
	}
	
	.font-color-00 {
		color: #000000;
	}
	.font-color-11 {
		color: #666666;
	}
	.font-color-22 {
		color: #808080;
	}
	
</style>


4【这个没有自定义图片，需要自己修改图标地址，因为它不是高频率动态所以不做】

655 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由，像大地一样宽容；
在艰辛放逐的路上，点亮生命的光芒；
我要像梦一样自由，像天空一样坚强；
在曲折蜿蜒的路上，体验生命的意义；

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注