uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)

news/2024/11/8 5:42:46/

一. 创建一个hooks

        hooks—>useSystemBar.js

二. useSystemBar.js

       其中// #ifdef MP-WEIXIN 不是注释 这是uni-app的写法         

import {ref} from 'vue';export default function() {// 获取系统信息let systemInfo = '';// #ifdef MP-WEIXINsystemInfo = uni.getWindowInfo(); // #endif// #ifndef MP-WEIXINsystemInfo = uni.getSystemInfoSync();// #endif// 获取刘海-状态栏高度let StatusBarHeight = systemInfo.statusBarHeight || 15;// 获取title-自定义内容高度let TitleBarHeight = '';if(uni.getMenuButtonBoundingClientRect){let {top,height} = uni.getMenuButtonBoundingClientRect();TitleBarHeight = height + (top - StatusBarHeight)*2		}else{TitleBarHeight = 40;}// 占位高度-胶囊离下面内容高度let NavBarHeight = StatusBarHeight + TitleBarHeight;// 判断是否是头条let ttLeftIconLeft = '';		// 头条胶囊左侧有一个固定的图标,所以要获取图标加图标左侧间距的距离// #ifdef MP-TOUTIAOlet {leftIcon:{left,width}}  = tt.getCustomButtonBoundingClientRect();ttLeftIconLeft = left+ parseInt(width);// #endif// #ifndef MP-TOUTIAOttLeftIconLeft = 0;// #endifreturn {StatusBarHeight,TitleBarHeight,NavBarHeight,ttLeftIconLeft}
}

三. 使用

       在需要页面上使用 下面这个文件是我的项目头部封装 你可以在titleBar标签内写自己的业务逻辑, 并且你拿到StatusBarHeight, TitleBarHeight, NavBarHeight, ttLeftIconLeft这四个值, 你就可以随意操作了

<template><!-- bar --><view class="layout"><view class="navbar"><!-- 刘海位置-状态栏 --><view class="statusBar" :style="{height: StatusBarHeight + 'px'}"></view><!-- 自己内容位置 --><view class="titleBar" :style="{height:TitleBarHeight+'px',marginLeft:ttLeftIconLeft + 'px'}"><view class="title">{{ title }}</view><view class="search"><uni-icons class="icon" type="search" color="#888" size="18"></uni-icons><text class="text">搜索</text></view></view></view><!-- 占位 --><view class="fill" :style="{height:NavBarHeight +'px'}"></view></view>
</template><script setup>defineProps({title: {type:String,default:"壁纸"}})// hooksimport useSystemBar from '../../hooks/useSystemBar';const { StatusBarHeight, TitleBarHeight, NavBarHeight, ttLeftIconLeft } = useSystemBar();</script><style lang="scss" scoped>
.layout{.navbar{position: fixed;top:0;left:0;width: 100%;z-index: 10;background:linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#F4E2D8);.statusBar{}.titleBar{display: flex;	align-items: center;padding:0 30rpx;.title{font-size: 44rpx;font-weight: 700;color: $text-font-color-1;}.search{width: 220rpx;height: 60rpx;border-radius: 60rpx;background: rgba(255,255,255,0.4);margin-left:30rpx;color:#999;font-size: 28rpx;display: flex;align-items: center;.icon{margin-left:5rpx;}.text{padding-left:10rpx;}}}}.fill{}
}
</style>


http://www.ppmy.cn/news/1545270.html

相关文章

8+ 典型分析场景,25+ 标杆案例,Apache Doris 和 SelectDB 精选案例集(2024版)电子版上线

当前&#xff0c;各企业正面临前所未有的数据增量&#xff0c;不仅体现在数据规模的急剧上升&#xff0c;还体现在数据的类型多样性和产生速度的加快。数据体量大固然蕴藏着更大的潜力及可能性&#xff0c;但如何有效利用这些数据&#xff0c;解决实际问题、赋能业务增长&#…

leetcode138:随机链表的复制

给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新节点的 n…

二叉树 最大深度(递归)

给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;root [1,null,2] 输出…

AJ-Report:一款开源且非常强大的数据可视化大屏和报表工具

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和工作学习方法 AJ-Report是一个基于Java的开源报表工具&#xff0c;它集成了ECharts、Ant Design Vue等前端技术&#xff0c;致力于为企业提供一站式的数据可视化解决方案…

利用 Avalonia UI 构建 Blazor 混合应用程序

Blazor 是一个 .NET 前端框架&#xff0c;用于仅使用 .NET 技术构建 Web 应用程序。2021 年&#xff0c;Blazor 扩展到桌面端&#xff0c;推出了 Blazor Hybrid&#xff08;混合&#xff09;&#xff0c;使开发者可以在桌面平台上使用已有的技能。 Blazor 混合应用程序是传统的…

高级 <HarmonyOS主题课>借助AR引擎帮助应用实现虚拟与现实交互的能力的课后习题

持而盈之&#xff0c;不如其已&#xff1b; 揣而锐之&#xff0c;不可长保。 金玉满堂&#xff0c;莫之能守&#xff1b; 富贵而骄&#xff0c;自遗其咎。 功成身退&#xff0c;天之道也。 VR (Virtual Reality): 虚拟现实技术 AR (Augmented Reality): 增强现实) XR.(Extend…

B3648 [语言月赛202208] 你几岁了

题目描述 小 A 今年 xx 岁。他刚学了英语&#xff0c;想告诉其他人&#xff1a;I am x years old. 输入格式 输入一个数 x(2\le x \le 100)x(2≤x≤100)&#xff0c;代表小 A 的年龄。 输出格式 输出一句话。 输入输出样例 输入 2 输出 I am 2 years old. 输入 5…

C语言必做30道练习题

C语言练习30题&#xff08;分支循环&#xff0c;数组&#xff0c;函数&#xff0c;递归&#xff0c;操作符&#xff09; 目录 分支循环1.闰年的判断2.阅读代码&#xff0c;计算代码输出的结果3.输入一个1~7的数字&#xff0c;打印对应的星期几4.输入任意一个整数值&#xff0c;…