From a981e5a6d920bd477fff683158625fad505f4cc8 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Thu, 10 Apr 2025 17:05:03 +0800
Subject: [PATCH] style:自定义导航添加zindex
---
layout/navCustomBar/CNavCustomBar.vue | 13 +++++++++----
1 files changed, 9 insertions(+), 4 deletions(-)
diff --git a/layout/navCustomBar/CNavCustomBar.vue b/layout/navCustomBar/CNavCustomBar.vue
index 3110647..fc6ac45 100644
--- a/layout/navCustomBar/CNavCustomBar.vue
+++ b/layout/navCustomBar/CNavCustomBar.vue
@@ -6,7 +6,7 @@
<template>
<view
class="c-nav-custom-bar"
- :style="{height:navBarHeight + 'px',paddingTop:statusBarHeight + 'px',boxSizing:'border-box'}"
+ :style="{height:navBarHeight + 'px',paddingTop:statusBarHeight + 'px',boxSizing:'border-box',zIndex:99}"
>
<view
class="c-nav-icon"
@@ -40,7 +40,6 @@
import Taro from '@tarojs/taro';
import { AtIcon } from 'taro-ui-vue';
import './cNavCustomBar.scss';
-import { helper } from '@components/plugins/echarts/echarts';
export default {
name: 'CNavCustomBar',
@@ -72,15 +71,16 @@
//获取胶囊对象
let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
// 获取设备系统对象
- var sysInfo = wx.getSystemInfoSync();
+ let sysInfo = wx.getSystemInfoSync();
// 获取状态栏高度
let statusBarHeight = sysInfo.statusBarHeight;
// 获取胶囊高度
let menuButtonHeight = menuButtonObject.height;
// 获取胶囊距离顶部的高度
let distanceTop = menuButtonObject.top;
+ //计算nav导航栏的高度
let navBarHeight =
- statusBarHeight + menuButtonHeight + (distanceTop - statusBarHeight) * 2; //计算nav导航栏的高度（上图蓝色线段的长度）
+ statusBarHeight + menuButtonHeight + (distanceTop - statusBarHeight) * 2;
this.navBarHeight = navBarHeight;
this.statusBarHeight = statusBarHeight;
},
@@ -94,6 +94,11 @@
$getStatusBarHeight() {
return this.statusBarHeight;
},
+
+ // 使用自定义导航时，需要在主页显示的设置padding的值，此值是导航栏的高度，本导航已经使用固定定位为头部
+ $getNavBarHeight() {
+ return this.navBarHeight;
+ },
},
};
</script>
--
Gitblit v1.9.1