style:自定义导航添加zindex

‘chensiAb’

2025-04-10 a981e5a6d920bd477fff683158625fad505f4cc8

 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>