zhgdyunapp_vue3/components/headers/headers.vue

<template>
	<page-meta v-if="fontsizeFlag" :page-font-size="fontsize + 'px'" :root-font-size="fontsize + 'px'"></page-meta>
	<view :class="{'bg_2b8':scrollTopFlag, 'whiteHeaderBox': themeType}">
		<!-- themeType ? 'whiteHeaderBox' : '' -->
		<!-- 手机状态层 -->
		<view :style="{ height: mobileTopHeight + 'px' }" class="statusBar"></view>
		<view class="headerBox">
			<u-icon v-if="iconType && showBack" class="backImg" @click="$emit('select')" name="list" size="40"></u-icon>
			<uni-icons2 v-else-if="showBack" @click="goBackFn" class="backImg" type="left"></uni-icons2>
			<slot class="headerName"></slot>
			<view class="rightIcon">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["showBack", "themeType", "iconType"],
		data() {
			return {
				mobileTopHeight: 0,
				scrollTopFlag: false,
				fontsize: 16,
				fontsizeFlag: false,
			};
		},
		mounted() {
			// if(uni.getMenuButtonBoundingClientRect()){
			// 	this.mobileTopHeight = uni.getMenuButtonBoundingClientRect().top
			// }else{
			// 	this.mobileTopHeight = 0
			// }
			var that = this;
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync("systemInfo", res);
					console.log(res);
				},
			});
			console.log("this.mobileTopHeight11", this.mobileTopHeight);
			// 监听滚动
			// #ifdef H5
			window.addEventListener("scroll", this.throttleHandleScroll);
			// #endif
			this.onPageFontSize();

			// 监听navigateTo跳转
			uni.addInterceptor('navigateTo', {
				success(e) {
					that.onPageFontSize();
				}
			});
			// 监听redirectTo跳转
			uni.addInterceptor('redirectTo', {
				success(e) {
					that.onPageFontSize();
				}
			});
			// 监听switchTab跳转
			uni.addInterceptor('switchTab', {
				success(e) {
					that.onPageFontSize();
				}
			});
			// 监听navigateBack返回
			uni.addInterceptor('navigateBack', {
				success(e) {
					that.onPageFontSize();
				}
			});
		},
		beforeDestroy() {
			// #ifdef H5
			window.removeEventListener('scroll', this.throttleHandleScroll);
			// #endif
			uni.removeInterceptor('navigateTo');
			uni.removeInterceptor('redirectTo');
			uni.removeInterceptor('switchTab');
			uni.removeInterceptor('navigateBack');
		},
		methods: {
			onPageFontSize() {
				let that = this;
				that.fontsizeFlag = false;
				//窗体改变大小触发事件
				// uni.onWindowResize((res) => {
				// 	console.log('变化后的窗口宽度=', res.size.windowWidth);
				// 	let scale = res.windowWidth / 1920;
				// 	that.fontsize = 58 * Math.min(scale, 2);
				// })

				//打开获取屏幕大小
				uni.getSystemInfo({
					success(res) {
						console.log('设备信息：', res);
						let scale = res.windowWidth / (res.windowWidth > 760 ? 1920 : 1520)
						that.fontsize = 58 * Math.min(scale, 2);
						console.log('字体大小：', that.fontsize, that.fontsizeFlag);
						that.$nextTick(() => {
							that.fontsizeFlag = true;
						})
					}
				})
			},
			// 节流处理滚动事件
			throttleHandleScroll() {
				// 距顶部
				var scrollTop =
					document.documentElement.scrollTop || document.body.scrollTop;
				// 可视区高度
				var clientHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				// 滚动条总高度
				var scrollHeight =
					document.documentElement.scrollHeight || document.body.scrollHeight;

				// 打印数值
				// console.table([
				//   {
				//     label: "距顶部",
				//     value: scrollTop,
				//   },
				//   {
				//     label: "可视区高度",
				//     value: clientHeight,
				//   },
				//   {
				//     label: "滚动条总高度",
				//     value: scrollHeight,
				//   },
				//   {
				//     label: "距顶部 + 可视区高度",
				//     value: scrollTop + clientHeight,
				//   },
				// ]);
				console.log("scrollTop", scrollTop);

				if (scrollTop == 0 && this.scrollTopFlag) {
					// document.querySelector('.headerBox').style.backgroundColor = 'transparent';
					this.scrollTopFlag = false;
				} else if (scrollTop > 0 && !this.scrollTopFlag) {
					this.scrollTopFlag = true;
					// document.querySelector('.headerBox').setAttribute('style', 'background-color: #2b8df3 !important');
				}


			},
			goBackFn() {
				uni.navigateBack({
					success: function() {
						// console.log('getCurrentPages()',getCurrentPages())
						// let page = getCurrentPages()[0]; //跳转页面成功之后
						// if(page.route=='pages/projectManage/projectManage'){
						// }
						// if (!page) return;
						// page.onLoad(); //如果页面存在，则重新刷新页面
					},
				});
			},
		},
		// watch: {
		// 	$route: {
		// 		deep: true,
		// 		handler(val) {
		// 			// console.log("watch", val);
		// 			this.onPageFontSize();
		// 		},
		// 	},
		// }
	};
</script>

<style lang="scss" scoped>
	.statusBar {
		//   background-color: #2a2b5b;
		background-color: white;
	}

	.bg_2b8 {
		background-color: #2b8df3 !important;
	}

	.whiteHeaderBox {
		.statusBar {
			// background-color: #2b8df3;
			background-color: transparent;
		}

		.rightIcon {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
		}
	}
</style>