这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

前言

大家好,今天聊一下在做uniapp多端适配项目,需要用到自定义导航时,如何解决状态栏塌陷及导航栏安全区域多端适配问题,下文只针对H5、APP、微信小程序三端进行适配,通过封装一个通用高阶组件包裹自定义导航栏内容,主要是通过设置padding来使内容始终保持在安全区域,达到低耦合,可复用性强的效果。

一、创建NavbarWrapper.vue组件

大致结构如下:

<template>
<view class="navbar-wrapper" :style="{
paddingTop: statusBarHeight,
paddingRight: rightSafeArea
}">
<slot/>
</view>
</template> <script>
export default {
name: 'NavbarWrapper',
data() {
return {
// 像素单位
pxUnit: 'px',
// 默认状态栏高度
statusBarHeight: 'var(--status-bar-height)',
// 微信小程序右上角的胶囊菜单宽度
rightSafeArea: 0
}
}
}
</script> <style scoped>
.navbar-wrapper {
/**
* 元素的宽度和高度包括了内边距(padding)和边框(border),
* 而不会被它们所占据的空间所影响
* 子元素继承宽度时,只会继承内容区域的宽度
*/
box-sizing: border-box;
}
</style>

目的

主要是动态计算statusBarHeight和rightSafeArea的值。

解决方案

在APP端只需一行css代码即可

.navbar-wrapper {
padding-top: var(--status-bar-height);
}

下面是关于--status-bar-height变量的介绍:

从上图可以知道--status-bar-height只在APP端是手机实际状态栏高度,在微信小程序是固定的25px,并不是手机实际状态栏高度;

微信小程序时,除了状态栏高度还需要获取右上角的胶囊菜单所占宽度,保持导航栏在安全区域。

以下使用uni.getWindowInfo()uni.getMenuButtonBoundingClientRect()来分别获取状态栏高度和胶囊相关信息,api介绍如下图所示:

主要逻辑代码

在NavbarWrapper组件创建时,做相关计算

created() {
const px = this.pxUnit
// #ifndef H5
// 获取窗口信息
const windowInfo = uni.getWindowInfo()
this.statusBarHeight = windowInfo.statusBarHeight + px
// #endif // #ifdef MP-WEIXIN
// 获取胶囊左边界坐标
const { left } = uni.getMenuButtonBoundingClientRect()
// 计算胶囊(包括右边距)占据屏幕的总宽度:屏幕宽度-胶囊左边界坐标
this.rightSafeArea = windowInfo.windowWidth - left + px
// #endif
}

用法

<NavbarWrapper>
<view class="header">header</view>
</NavbarWrapper>

二、多端效果展示

微信小程序

APP端

H5端

三、源码

NavbarWrapper.vue

<template>
<view class="navbar-wrapper" :style="{
paddingTop: statusBarHeight,
paddingRight: rightSafeArea
}">
<slot/>
</view>
</template> <script>
export default {
name: 'NavbarWrapper',
data() {
return {
// 像素单位
pxUnit: 'px',
// 默认状态栏高度
statusBarHeight: 'var(--status-bar-height)',
// 微信小程序右上角的胶囊菜单宽度
rightSafeArea: 0
}
},
created() {
const px = this.pxUnit
// #ifndef H5
// 获取窗口信息
const windowInfo = uni.getWindowInfo()
this.statusBarHeight = windowInfo.statusBarHeight + px
// #endif // #ifdef MP-WEIXIN
// 获取胶囊左边界坐标
const { left } = uni.getMenuButtonBoundingClientRect()
// 计算胶囊(包括右边距)占据屏幕的总宽度:屏幕宽度-胶囊左边界坐标
this.rightSafeArea = windowInfo.windowWidth - left + px
// #endif
}
}
</script> <style scoped>
.navbar-wrapper {
/**
* 元素的宽度和高度包括了内边距(padding)和边框(border),
* 而不会被它们所占据的空间所影响
* 子元素继承宽度时,只会继承内容区域的宽度
*/
box-sizing: border-box;
background-color: deeppink;
}
</style>

本文转载于:

https://juejin.cn/post/7309361597556719679

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题的更多相关文章

  1. uniapp 微信小程序 实现左侧菜单右侧列表,双向联动的效果

    <template> <view class="u-wrap"> <view class="u-search-box"> & ...

  2. uniapp 微信小程序 配置分享朋友和朋友圈

    uniapp 微信小程序 配置分享朋友和朋友圈 首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, onShareTimeline 这两个API 和 onLoad 同级目 ...

  3. uni-app微信小程序解决多个视频同时播放问题

    这里我用的uni-app开发的小程序,微信小程序原生开发也是同理, 写法和api简单改下就行 当你的页面上有多个视频video组件标签时, 会出现多个视频可以同时播放的问题,这样显然是不正常的, 那么 ...

  4. 【重点突破】—— UniApp 微信小程序开发官网学习Two

    一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, ...

  5. uni-app微信小程序登录授权

    微信小程序授权是非常简单和常用的功能,但为了方便,还是在此记录一下要点: 首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@g ...

  6. uni-app微信小程序开发之引入腾讯视频小程序播放插件

    登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码 ...

  7. 【重点突破】—— UniApp微信小程序开发教程学习Three

    一.实战 HBuilderX:在微信小程序中运行页面,需要设置->安全 开启微信小程序服务端口,HBuilder工具->设置->配置程序路径 网络请求.模板语法.打开页面.页面传参 ...

  8. 【重点突破】—— UniApp 微信小程序开发官网学习One

    一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/ ...

  9. uniapp微信小程序canvas绘图插入网络图片不显示

    网络图片缓存 在uni中wx可以用uni代替 无区别: 先把要插入的网络图片缓存(getImageInfo); let context = uni.createCanvasContext('first ...

  10. uniapp微信小程序获取当前用户手机号码(前端)

    按钮触发获取用户信息 uniapp中与微信小程序官网所写会不同, <button open-type="getPhoneNumber" @getphonenumber=&qu ...

随机推荐

  1. PostgreSQL-可以通过localhost连接,无法通过IP地址连接。

    (1)如果PostgreSQL配置文件中没有允许访问该服务器的IP地址,则需要先添加允许访问的IP地址,并在防火墙中开放相应的端口.(2)在PostgreSQL配置文件postgresql.conf中 ...

  2. 从零开始的react入门教程(九),react context上下文详解,可能有点啰嗦,但很想让你懂

    壹 ❀ 引 我在从零开始的react入门教程(八),redux起源与基础用法一文中,介绍了redux的前辈Flux,以及redux关于单项数据更新的基本用法.我们在前文提到,相对Flux支持多个sto ...

  3. Java集合框架学习(十二) Arrays类详解

    声明:部分内容参考自:https://liuyanzhao.com/2863.html Arrays类介绍 这个类包含了用于操作数组的各种方法,诸如:排序和搜索. 这个类还包含一个静态方法asList ...

  4. 我的小程序之旅八:基于weixin-java-mp实现微信公众号被动回复消息

    在微信里有这样一个公众号[华为运动健康],当点击最新排行的时候,公众号就会发送今天最新的运动步数给你.如下图: 这里有两种格式的消息 1.有头像框,有聊天框--普通消息 2.消息有样式.颜色等--模板 ...

  5. win32-制作mini dump文件

    一个完整的用户模式dump是基本的用户模式转储文件. 此转储文件包括进程的整个内存空间,程序的可执行映像本身,句柄表以及其他信息,这些信息对于调试器在重建转储发生时正在使用的内存中很有用. 可以将完整 ...

  6. [2023本地存储方案](https://www.cnblogs.com/fangchaoduan/p/17608006.html)

    2023本地存储方案 本地存储方案 cookie 本地存储:有期限的限制,可以自己设置过期期限.在期限内,不论页面刷新还是关闭,存储的信息都还会存在. localStorage 本地持久化存储:页面刷 ...

  7. 01、SECS的基本概念

    最近做的项目跟半导体设备相关,需要学习SECS相关的内容,把自己的学习记录分享出来,如有不足甚至错误的地方,请不吝赐教,十分感谢! 文章内容基本都是SECS协议的内容和参考的资料,只不过是加了自己的理 ...

  8. 在Windows环境中配置使用我们搭建的DNS服务器

    1.修改网卡的设置,首选DNS用我们自己的 2.在命令行中测试 专业的nslookup 3.已知的问题 每次在DNS服务器的web界面中,修改了解析,必须用docker restart dns命令,把 ...

  9. 启动Study.BlazorOne项目

    由于Study.Trade模块的Blazor是基于国内著名的BootstrapBlazor组件,因此Study.BlazorOne项目也必须添加对BootstrapBlazor的支持. # 1.去Bo ...

  10. 【Azure App Service for Linux】NodeJS镜像应用启动失败,遇见 RangeError: Incorrect locale information provided

    问题描述 在App Service For Linux 中,部署NodeJS应用,应用启动失败. 报错信息为: 2023-08-29T11:21:36.329731566Z RangeError: I ...