Uniapp has a custom header, supports applet alignment, and has a high degree of security with the browser

Time:2022-2-8
<template>
	<view class="Header-box" :class="{xcx: statusBarHeight, common: !statusBarHeight}" :style="{paddingBottom: `${statusBarHeight}px`}">
		<view class="header-fixed-box" :style="{
                background: noBg ? noBg : '',
				height: `${statusBarHeight}px`
            }">
			<view class="header-main-box"  :style="{height: `${statusBarHeight}px`}">
				<view v-if="!noLeft" @click="headerLeftClick" class="header-left-box header-operation">
					<image v-if="whiteback" class="header-left-back" mode="widthFix"
						src="../static/index/white.png" />
					<image v-else class="header-left-back" mode="widthFix" src="../static/index/black.png" />
				</view>
				<view class="header-title" :style="{color:titlecolor?titlecolor:' #fff'}">{{ pageTitle }}
				</view>
				<view @click="headerRightClick" :style="{paddingRight:rightPadding?rightPadding:'',color:rightColor?rightColor:''}" class="header-right-box header-operation">{{ rightText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			//Right text
			rightText: {
				default: "",
			},
			//Is there a background color
			noBg: {
				default: false,
			},
			//Is there a title color
			titlecolor: {
				default: false,
			},
			//Is there a white left arrow
			whiteback: {
				default: true,
			},
			//No return
			noLeft: {
				default: false,
			},
			notitle: {
				default: false,
			},
			//Right padding
			rightPadding: {
				default: false
			},
			rightColor:{
				default:false
			}
		},
		data() {
			return {
				pageTitle: "",
				//Height of wechat applet capsule
				statusBarHeight: ""
			};
		},
		beforeMount() {
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			wx.getSystemInfo({
			    success: res=>{
					console.log(res.statusBarHeight);
					this.statusBarHeight = (res.statusBarHeight + (custom.top - res.statusBarHeight)) * 2 + custom.height;
				}
			});
			// #endif
		},
		created() {
			//Get the route title of the current page
			if (this.notitle) {
				this.pageTitle = this.notitle
			} else {
				this.pageTitle = this.$Route.style.navigationBarTitleText;
			}
		},
		methods: {
			headerRightClick() {
				//Component binding click event
				this.$emit("rightClick");
			},
			headerLeftClick() {
				uni.navigateBack({});
				uni.setStorageSync("changeActive", 0)
			},

			//Change title
			changeTitle(title) {
				console.log(title);
				this.pageTitle = title;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.Header-box {
		position: relative;
		//Common styles
		&.common {
			padding-bottom: 100rpx;
			padding-bottom: calc(constant(safe-area-inset-top) + 100rpx);
			padding-bottom: calc(env(safe-area-inset-top) + 100rpx);
			.header-fixed-box {
				height: 100rpx;
				height: calc(constant(safe-area-inset-top) + 100rpx);
				height: calc(env(safe-area-inset-top) + 100rpx);
				.header-main-box {
					height: calc(100rpx - constant(safe-area-inset-top));
					height: calc(100rpx - env(safe-area-inset-top));
					height: 100rpx;
				}
			}
		}
		//Applet style
		&.xcx {}
		.header-fixed-box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9;
			background: rgba(255, 255, 255, 0);
			.header-main-box {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				text-align: center;
				color: white;
				.header-title {
					color: #fff;
					width: 70%;
					height: 100%;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
				}

				.header-operation {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 15%;
					position: absolute;
					bottom: 0;
					white-space: nowrap;
					color: #333 !important;

					.header-left-back {
						width: 33rpx;
					}

					&.header-left-box {
						left: 0;
					}

					&.header-right-box {
						right: 0;
						width: auto;
					}
				}
			}
		}
	}
</style>

Compatibility is not easy. If it’s easy to use, please move the little hand that won’t bug. Give me a little attention and will constantly update more useful components and technologies

Recommended Today

Ansible combat MySQL installation

Do the preparatory work first, prepare a client, and then equip a master machine. Check connectivity: [[email protected] ~]# ansible mytest -m ping 10.128.25.175| SUCCESS => { “ansible_facts”: { “discovered_interpreter_python”: “/usr/bin/python” }, “changed”: false, “ping”: “pong” } [[email protected] ~]# 1. Ansible module search method 1. Ansible’s yum module search yum module online documentation: https://docs.ansible.com/ansible/latest/collections/ansible/builtin/yum_module.html Example: – […]