記錄--優雅解決uniapp微信小程式右上角膠囊菜單覆蓋問題

来源:https://www.cnblogs.com/smileZAZ/archive/2023/12/08/17888782.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 大家好,今天聊一下在做uniapp多端適配項目,需要用到自定義導航時,如何解決狀態欄塌陷及導航欄安全區域多端適配問題,下文只針對H5、APP、微信小程式三端進行適配,通過封裝一個通用高階組件包裹自定義導航欄內容,主要是通過設置pad ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

前言

大家好,今天聊一下在做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

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在.NET中,Microsoft.Extensions.Logging是一個靈活的日誌庫,它允許你將日誌信息記錄到各種不同的目標,包括資料庫。在這個示例中,我將詳細介紹如何使用Microsoft.Extensions.Logging將日誌保存到MySQL資料庫。我們將使用Entity Framewo ...
  • 前言 本文要說的這種開發模式,這種模式並不是只有blazor支持,js中有一樣的方案next.js nuxt.js;blazor還有很多其它內容,本文近關註漸進式開發模式。 是的,前後端是主流,不過以下情況也許前後端分離並不是最好的選擇: 小公司,人員不多,利潤不高,創業階段能省則省 個人開發者,接 ...
  • 使用Aspirate可以將Aspire程式部署到Kubernetes 集群 工具安裝 dotnet tool install -g aspirate --prerelease 註意:Aspirate 正在開發中,該軟體包將作為預覽版進行版本控制,--prelease 選項將獲得最新的預覽版。 容器註 ...
  • 本篇將分享Prometheus+Grafana的監控平臺搭建,並監控之前文章所搭建的主機&服務,分享日常使用的一些使用經驗本篇將配置常用服務的監控與面板配置:包括 MySQL,MongoDB,CLickHouse,Redis,RabbitMQ,Linux,Windows,Nginx,站點訪問監控,已... ...
  • 當使用Autofac處理一個介面有多個實現的情況時,通常會使用鍵(key)進行區分或者通過IIndex索引註入,也可以通過IEnumerable集合獲取所有實例,以下是一個具體的例子,演示如何在Autofac中註冊多個實現,並通過構造函數註入獲取指定實現。 首先,確保你已經安裝了Autofac Nu ...
  • tmux教程 功能 分屏:可以在一個開發框里分屏 允許terminal在連接斷開之後可以繼續運行,讓進程不會因為斷開連接而中斷 結構 // 一個tmux可以包含多個session,一個session可以包含多個window,一個window可以包含多個pane。 tmux: session 0: w ...
  • 本文分享自華為雲社區《GaussDB資料庫SQL系列-層次遞歸查詢》,作者: Gauss松鼠會小助手2。 一、前言 層次遞歸查詢是一種常見的SQL查詢方式,特別是在一些層次化的數據存儲結構中經常用到。本文主要以GaussDB資料庫為實驗平臺,為大家講解其使用方法。 二、GuassDB資料庫層次遞歸查 ...
  • 在我們應用中的使用場景來看,簡單來說通常會看中了clickhouse在處理大批量數據的寫入和讀取分析方面的性能,MySQL會主要負責一些基於模型進行指標二次加工的高頻查詢及複雜join的查詢。 ...
一周排行
    -Advertisement-
    Play Games
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...