From e55aa7ece892cd6078a6229d2c5b6a2dd029be7b Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 04 Mar 2025 10:13:40 +0800
Subject: [PATCH] feat:index页自定义导航条
---
layout/navCustomBar/CNavCustomBar.vue | 99 +++++++++++++++++++++++++++++++++
layout/navCustomBar/index.js | 8 ++
layout/navCustomBar/cNavCustomBar.scss | 35 +++++++++++
3 files changed, 142 insertions(+), 0 deletions(-)
diff --git a/layout/navCustomBar/CNavCustomBar.vue b/layout/navCustomBar/CNavCustomBar.vue
new file mode 100644
index 0000000..3110647
--- /dev/null
+++ b/layout/navCustomBar/CNavCustomBar.vue
@@ -0,0 +1,99 @@
+/**
+ * CNavCustomBar - 自定义导航条
+ * @author chensi
+ */
+
+<template>
+ <view
+ class="c-nav-custom-bar"
+ :style="{height:navBarHeight + 'px',paddingTop:statusBarHeight + 'px',boxSizing:'border-box'}"
+ >
+ <view
+ class="c-nav-icon"
+ :style="{height:(navBarHeight - statusBarHeight) + 'px'}"
+ >
+ <view
+ v-if="!isNeedBackIcon"
+ class="c-nav-menu-icon"
+ >
+ <slot name="icon"></slot>
+ </view>
+ <view
+ v-if="isNeedBackIcon"
+ class="c-nav-back-icon"
+ @tap="evt => onBack()"
+ >
+ <AtIcon
+ value='chevron-left'
+ size='26'
+ color='#000'
+ ></AtIcon>
+ </view>
+ </view>
+ <view class="c-nav-title">
+ {{ title }}
+ </view>
+ </view>
+</template>
+
+<script>
+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',
+ components: {
+ AtIcon,
+ },
+ props: {
+ isNeedBackIcon: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ default: '',
+ },
+ },
+ computed: {},
+ data() {
+ return {
+ navBarHeight: 0,
+ statusBarHeight: 0,
+ };
+ },
+ mounted() {
+ this.getNavBarHeight();
+ },
+ methods: {
+ getNavBarHeight() {
+ //获取胶囊对象
+ let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
+ // 获取设备系统对象
+ var sysInfo = wx.getSystemInfoSync();
+ // 获取状态栏高度
+ let statusBarHeight = sysInfo.statusBarHeight;
+ // 获取胶囊高度
+ let menuButtonHeight = menuButtonObject.height;
+ // 获取胶囊距离顶部的高度
+ let distanceTop = menuButtonObject.top;
+ let navBarHeight =
+ statusBarHeight + menuButtonHeight + (distanceTop - statusBarHeight) * 2; //计算nav导航栏的高度（上图蓝色线段的长度）
+ this.navBarHeight = navBarHeight;
+ this.statusBarHeight = statusBarHeight;
+ },
+
+ onBack() {
+ Taro.navigateBack({
+ delta: 1,
+ });
+ },
+
+ $getStatusBarHeight() {
+ return this.statusBarHeight;
+ },
+ },
+};
+</script>
diff --git a/layout/navCustomBar/cNavCustomBar.scss b/layout/navCustomBar/cNavCustomBar.scss
new file mode 100644
index 0000000..85104d1
--- /dev/null
+++ b/layout/navCustomBar/cNavCustomBar.scss
@@ -0,0 +1,35 @@
+/**
+ * cNavCustomBar - 自定义导航条
+ * @author chensi
+ */
+
+@import "../../common/sassMixin";
+
+.c-nav-custom-bar {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ position: relative;
+ .c-nav-icon {
+ position: absolute;
+ left: 0px;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .c-nav-menu-icon {
+ margin-left: 14px;
+ }
+ .c-nav-back-icon {
+ display: flex;
+ align-items: center;
+ }
+ }
+ .c-nav-title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ font-size: 32px;
+ }
+}
\ No newline at end of file
diff --git a/layout/navCustomBar/index.js b/layout/navCustomBar/index.js
new file mode 100644
index 0000000..a850c4f
--- /dev/null
+++ b/layout/navCustomBar/index.js
@@ -0,0 +1,8 @@
+/**
+ * CNavCustomBar
+ * @author chensi
+ */
+
+import CNavCustomBar from '@components/layout/navCustomBar/CNavCustomBar.vue';
+
+export { CNavCustomBar };
--
Gitblit v1.9.1