WebApp【公共组件库】@前端(For Git Submodule)
‘chensiAb’
6 days ago fbb96ab8a5a00015227612d9706f0ca1a7f85461
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"
@@ -21,7 +21,7 @@
            <view
                v-if="isNeedBackIcon"
                class="c-nav-back-icon"
                @tap="evt => onBack()"
                @tap="evt => handleBack()"
            >
                <AtIcon
                    value='chevron-left'
@@ -30,7 +30,7 @@
                ></AtIcon>
            </view>
        </view>
        <view class="c-nav-title">
        <view :class="[isNeedBackIcon ? 'c-nav-title-back' : 'c-nav-title']">
            {{ title }}
        </view>
    </view>
@@ -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',
@@ -55,6 +54,10 @@
        title: {
            type: String,
            default: '',
        },
        onBack: {
            type: Function,
            default: () => {},
        },
    },
    computed: {},
@@ -72,28 +75,35 @@
            //获取胶囊对象
            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;
        },
        onBack() {
            Taro.navigateBack({
                delta: 1,
            });
        handleBack() {
            this.onBack();
            // Taro.navigateBack({
            //     delta: 1,
            // });
        },
        $getStatusBarHeight() {
            return this.statusBarHeight;
        },
        //  使用自定义导航时,需要在主页显示的设置padding的值,此值是导航栏的高度,本导航已经使用固定定位为头部
        $getNavBarHeight() {
            return this.navBarHeight;
        },
    },
};
</script>