首页 > 编程语言 >记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题

记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题

时间:2023-12-08 18:12:36浏览次数:61  
标签:uniapp -- 微信 胶囊 statusBarHeight 宽度 px

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

前言

大家好,今天聊一下在做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,--,微信,胶囊,statusBarHeight,宽度,px
From: https://www.cnblogs.com/smileZAZ/p/17888782.html

相关文章

  • 存储管理
    本章介绍的存储是服务器的硬盘存储,在Linux系统下,系统识别到硬盘后,会为其创建一份初始分区表。硬盘在分区后才可以使用,系统通过分区表来管理硬盘的使用。从连接方式上,存储分为以下3种类型。本地存储:直接插在服务器上的硬盘,系统文件存放在本地。外部存储:可以理解为平时使用的移动硬......
  • Linux虚拟机配置网络之Xshell远程连接
     ......
  • 你还有理由不升吗!Windows 12发布时间曝光:微软重磅更新
    据外媒最新报道称,微软目前已经准备,将于2024年推出为Windows12。虽然目前还不清楚下一个版本的Windows是Windows1124H2还是Windows12,但多个消息来源和微软的合作伙伴已经证实,计划在2024年对Windows进行重大更新。微软的合作伙伴曾表示,下一代Windows最早可能在5月或6月与新的......
  • Vue2 的 diff 算法详解
    所谓diff算法,就是通过比对新旧两个虚拟节点不一样的地方,针对那些不一样的地方进行新增或更新或删除操作。接下来详细介绍节点更新的过程。首先进行静态节点处理,判断新旧两个虚拟节点是否是静态节点,如果是,就不需要进行更新操作,可以直接跳过更新比对的过程。再更新处理新老节点......
  • Vue3 diff算法详解
    Diff更新算法由于目前Vue3对于性能的优化做了很多的处理,所以其在更新时并不会对所有的节点都进行diff更新。目前会进行diff更新的有以下两种情况:v-for容器节点自写的render()函数还有一种特殊情况会进行无diff的按序更新,这种更新是全替换模式,非常耗时:无key值的v-for语句,......
  • 微型5G智能网关助力打造智能清洁机器人
    智能机器人不断融入我们的生活,提供了越来越多样化的服务,例如专用于卫生清洁的机器人,就已经广泛应用于酒店、体育馆、大型商场、写字楼、工地等各种场景,相较于人工,机器人在此类具有高度重复性、劳动量大的工作中具有显著优势。  清洁机器人通常需要满足大面积的清洁工作,在工......
  • I/O重定向与管道
    使用tty可以获取当前终端号,输入命令,例如date会将系统时间输出到终端中,当使用date>文件名会将系统时间输出到该文件中,修改密码的命令passwd,按下后不继续输入新密码,使用psaux|greppasswd获取刚才使用passwd进程的信息,其中有pid,使用ls/proc/进程号/fd和ll/proc/进程号/fd获......
  • 前后端RPC交互
    需求:系统有WEB端、PC客户端、服务端(微服务架构)组成,WEB端和客户端(跨平台)功能有部分重合,共用一套微服务。Client要求必需使用RPC调用服务,WEB要求使用HTTP调用服务。 实现方案为提高开发效率,WEB采用Vue开发,Client使用Electron打包。前端采用Thrift与微服务通讯。服务端使用Dubb......
  • Ubuntu 2022 安装asp.net core
    首先明确,我们不需要安装SDK,而是只安装runtime就够了。而如果是runtime,则又分为几种情况:1. ASP.NETCore运行时8.0.0(最终实际安装的)ASP.NET核心运行时使你能够运行现有的Web/服务器应用程序。在Windows上,我们建议安装托管捆绑包,其中包括.NET运行......
  • 每日总结
    今天复习外观,享元和代理模式。均为结构型模式。其中外观模式主要作用是隐藏子系统内部的复杂性,并为客户端提供一个简单而一致的接口。其中包括外观角色,系统角色。享元模式主要是有效地支持大量细粒度的对象共享。它通过共享对象来减少内存消耗和提高性能。其中主要包括享元接......