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

一. 创建一个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.mzph.cn/pingmian/59752.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每日科技资讯:2024年11月09日【龙】农历十月初九 ---文末送书

目录 1.史上最强游戏CPU&#xff01;9800X3D首发评测2.苹果喊话iPhone 13和14钉子户&#xff1a;16方方面面都升级了3.加拿大政府下令 TikTok 关闭该国业务&#xff0c;但应用仍可以继续访问4.OpenAI 刚刚花了超过 1000 万美元购买了Chat.com5.Max 加入打击密码共享行列6.微软可…

探索深度学习的本质

深度学习的本质是利用多层&#xff08;深层&#xff09;的神经网络结构来从数据中学习复杂的模式和特征。其主要特点是具有层次结构&#xff0c;能够实现自动特征提取。非线性、可扩展性和迁移学习能力是深度学习能够处理复杂问题和广泛&#xff08;低成本&#xff09;应用的关…

vue3 + vite引入地址路径报错,以及无法点击跳转相应的文件

vue3 vite引入地址路径报错&#xff0c;以及无法点击跳转相应的文件 在项目中找到tsconfig.json&#xff0c;或者jsconfig.json 文件&#xff0c;使用一下代码替换即可。如果两个文件都不存在&#xff0c;如果项目使用了ts&#xff0c;就创建tsconfig.json文件&#xff0c;复…

API接口:助力汽车管理与安全应用

随着汽车行业的飞速发展&#xff0c;越来越多的汽车管理技术被应用到交通安全和智慧交通系统中。在这一过程中&#xff0c;API接口起到了至关重要的作用。通过API接口&#xff0c;我们可以实现诸如车主身份验核、车辆信息查询等功能&#xff0c;从而为汽车智慧交通发展与安全应…

TikTok本土店vs跨境店:解读TikTok小店差异

TikTok小店的两种主要的店铺类型&#xff1a;本土店和跨境店&#xff0c;虽然这两种店铺在功能上有相似之处&#xff0c;但它们在运营模式、市场定位、目标受众和面临的挑战等方面存在显著的区别。 一、定义与基本特征 1. TikTok本土店 本土店指的是在特定国家或地区内经营的…

[libos源码学习 1] Liboc协程生产者消费者举例

文章目录 1. CoRoutineEnv_t结构体用于管理协程环境 3 Liboc协程生产者消费者例子4 Liboc协程生产者消费者&#xff0c; 为什么队列不需要上锁&#xff1f;5. 两个协程访问资源不需要加队列吗5. 参考 1. CoRoutineEnv_t结构体用于管理协程环境 struct stCoRoutineEnv_t { stCo…

【leetcode】动态规划刷题总结-划分问题

判定能否划分 一般定义dp[i]表示nums[:i 1]能否划分&#xff0c;然后枚举最后一个子数组的左端点&#xff0c;得到nums[:i 1]能否划分 LeetCode2369题 检查数组是否存在有效划分 class Solution:def validPartition(self, nums: List[int]) -> bool:if len(nums) 2:re…

[含文档+PPT+源码等]精品基于springboot实现的原生Andriod广告播放系统

基于Spring Boot实现的原生Android广告播放系统背景&#xff0c;主要可以从以下几个方面进行阐述&#xff1a; 一、市场需求与背景 移动互联网的快速发展&#xff1a; 随着移动互联网技术的不断进步&#xff0c;智能手机已成为人们日常生活中不可或缺的一部分。人们越来越多地…

【汇编语言】[BX]和loop指令(四)—— 汇编语言中的段前缀与内存保护:原理与应用解析

文章目录 前言1. 段前缀1.1 示例演示1.2 总结 2. 一段安全的空间2.1 存在的问题2.2 示例演示2.2.1 编译、链接、加载程序2.2.2 运行程序 2.3 总结 3. 段前缀的使用3.1 问题引入3.2 分析问题3.3 代码实现3.4 程序的改进3.4.1 分析3.4.2 代码实现 结语 前言 &#x1f4cc; 汇编语…

经典双指针--合并升序链表

#include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <string.h>typedef struct Node {int data;struct Node* next; } Node;Node* newNode(int data);/* 请完成下面的函数 */ Node* mergeList(Node* L1, Node* L2) {Node* head n…

Python代码主要实现了一个基于Transformer和LSTM的混合模型,用于对给定数据集进行二分类任务

Python代码主要实现了一个基于Transformer和LSTM的混合模型,用于对给定数据集进行二分类任务。代码的大致流程包括数据读取、数据预处理、模型构建、模型训练与评估以及结果输出。 #!/usr/bin/env python # coding: utf-8# In[4]:import numpy as np import pandas as pd imp…

dell服务器安装ESXI8

1.下载镜像在官网 2.打开ipmi&#xff08;idrac&#xff09;&#xff0c;将esxi镜像挂载&#xff0c;然后服务器开机 3.进入bios设置cpu虚拟化开启&#xff0c;进入boot设置启动选项为映像方式 4..进入安装引导界面3.加载完配置进入安装 系统提示点击继 5.选择安装磁盘进行…

【dvwa靶场:XSS系列】XSS (Stored)低-中-高级别,通关啦

更改name的文本数量限制大小&#xff0c; 其他我们只在name中进行操作 【除了低级可以在message中进行操作】 一、低级low <script>alert("假客套")</script> 二、中级middle 过滤了小写&#xff0c;咱们可以大写 <Script>alert("假客套…

基于Python的自然语言处理系列(57):使用最佳表示向量法实现整本书的高效摘要

在自然语言处理中,处理大型文档,如书籍或长篇文本,总结其关键内容是一项挑战。面对长达数万或数十万字的书籍时,我们往往需要找到一种既能代表书籍主旨,又能降低处理成本的方法。本篇博文介绍了一种称为“最佳表示向量法”(Best Representation Vectors)的技术,通过向量…

从0开始学习机器学习--Day19--学习曲线

一般来说&#xff0c;如果一个算法的表现不理想&#xff0c;那么多半是因为出现了欠拟合或过拟合问题&#xff0c;这种时候我们要做的就是搞清楚出现的是偏差问题还是方差问题&#xff0c;亦或是二者皆有&#xff0c;这有助于我们精准定位问题所在。 之前&#xff0c;我们发现…

大牛直播SDK如何实现Android平台多路RTSP播放?

技术背景 好多开发者&#xff0c;希望能在Android平台实现多路RTSP播放&#xff0c;从而达到集中监控的目的&#xff0c;以下是使用大牛直播 SDK 在 Android 平台上实现 RTSP 多路播放的一般步骤&#xff1a; 初始化 SDK 在项目的build.gradle文件中添加大牛直播 SDK 的依赖。…

在研究中经常使用的数据可视化工具并进行分析

引言 在现代研究中&#xff0c;数据的复杂性不断增加&#xff0c;然而&#xff0c;通过数据可视化工具&#xff0c;研究人员能够将纷繁的数据转化为直观的图形&#xff0c;提供清晰的洞察&#xff0c;以便更好地解读数据和作出决策。选择合适的数据可视化工具不仅能提高工作效…

linux 通过apt安装软件包时出现依赖包版本不对的问题解决

通过网上查找解决办法时&#xff0c;发现的解决办法无法完美解决问题: 比如通过安装对应版本解决 如: sudo apt-get install xxx2.7.0ubuntu 这样会先卸载原先包&#xff0c;在安装对应版本的包 或者直接删除依赖的包 sudo apt-get purge xxxx 如果碰到底层包的话&#xf…

浮点数和字节数据的在线转换工具

具体请参考&#xff1a;浮点数在线转四字节字节序工具--在线将float浮点数转化为类似内存中的4字节字节序&#xff0c;支持2进制&#xff0c;10进制&#xff0c;16进制

GitLab基于Drone搭建持续集成(CI/CD)

本文介绍了如何为 Gitee 安装 Drone 服务器。服务器打包为在 DockerHub 上分发的最小 Docker 映像。 1. 准备工作 创建OAuth应用 创建 GitLab OAuth 应用。Consumer Key 和 Consumer Secret 用于授权访问极狐GitLab 资源。 ps:授权回调 URL 必须与以下格式和路径匹配&…