uni-app 小程序创建自定义导航栏组件，自适应屏幕高度

超能996要躺平2024-06-04 14:21

在 Uni-app 中自定义顶部导航栏可以通过使用 custom 配置来实现。下面是一个实现自定义顶部导航栏的完整示例代码。

配置 pages.json

首先，需要在 pages.json 中配置页面使用自定义导航栏：

js 复制代码 
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"  // 使用自定义导航栏
      }
    }
  ]
}

示例一

创建自定义导航栏组件

xml 复制代码 
<template>
  <view class="custom-navbar">
    <view class="left" @click="goBack">
      <text class="iconfont icon-back"></text>
    </view>
    <view class="title">{{ title }}</view>
    <view class="right">
      <!-- 可以添加其他按钮或图标 -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style>
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: env(safe-area-inset-top);
  height: calc(env(safe-area-inset-top) + 44px);
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  padding: 0 10px;
  box-sizing: border-box;
}

.left, .right {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.iconfont {
  font-size: 20px;
}
</style>

页面中使用自定义导航栏组件

在需要使用自定义导航栏的页面中引用并使用该组件，例如在 pages/index/index.vue 中：

xml 复制代码 
<template>
  <view>
    <custom-navbar title="首页"></custom-navbar>
    <view class="content">
      <!-- 你的页面内容 -->
    </view>
  </view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar.vue';

export default {
  components: {
    CustomNavbar
  }
}
</script>

<style>
/* 其他样式 */
.content {
  padding-top: calc(env(safe-area-inset-top) + 44px);
}
</style>

示例二

上面的例子，有个问题就是会出现部分屏幕顶部高度不适配，导致元素内容拥挤，不好看。这个例子提供了一种自适应方式处理

为了实现兼容所有手机屏幕的自定义顶部导航栏，可以采用更为通用的方法。我们可以结合设备信息和平台特性来设置合适的导航栏高度。以下是一个更通用的实现方法。

获取系统信息

在页面加载时获取系统信息，确定导航栏的高度。

kotlin 复制代码 
onLoad() {
  const systemInfo = uni.getSystemInfoSync();
  this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
  if (systemInfo.platform === 'android') {
    this.navBarHeight = this.statusBarHeight + 48; // Android 导航栏高度
  } else {
    this.navBarHeight = this.statusBarHeight + 44; // iOS 导航栏高度
  }
}

创建自定义导航栏组件

创建一个自定义导航栏组件，例如 custom-navbar.vue，并根据获取的状态栏高度动态调整导航栏样式。

xml 复制代码 
<template>
  <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px', height: navBarHeight + 'px' }">
    <view class="left" @click="goBack">
      <text class="iconfont icon-back"></text>
    </view>
    <view class="title">{{ title }}</view>
    <view class="right">
      <!-- 可以添加其他按钮或图标 -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 0
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    }
  },
  created() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
    if (systemInfo.platform === 'android') {
      this.navBarHeight = this.statusBarHeight + 48; // Android 导航栏高度
    } else {
      this.navBarHeight = this.statusBarHeight + 44; // iOS 导航栏高度
    }
  }
}
</script>

<style>
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  padding: 0 10px;
  box-sizing: border-box;
}

.left, .right {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.iconfont {
  font-size: 20px;
}
</style>

组件使用自定义导航栏组件

在需要使用自定义导航栏的页面中引用并使用该组件，例如在 pages/index/index.vue 中：

xml 复制代码 
<template>
  <view>
    <custom-navbar title="首页"></custom-navbar>
    <view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 你的页面内容 -->
    </view>
  </view>
</template>

<script>
import CustomNavbar from '@/components/custom-navbar.vue';

export default {
  components: {
    CustomNavbar
  },
  data() {
    return {
      navBarHeight: 0
    };
  },
  created() {
    const systemInfo = uni.getSystemInfoSync();
    const statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
    if (systemInfo.platform === 'android') {
      this.navBarHeight = statusBarHeight + 48; // Android 导航栏高度
    } else {
      this.navBarHeight = statusBarHeight + 44; // iOS 导航栏高度
    }
  }
}
</script>

<style>
/* 其他样式 */
.content {
  /* 确保内容不被导航栏遮挡 */
}
</style>

通过动态获取设备的状态栏高度并调整导航栏的样式，可以实现一个兼容所有手机屏幕的自定义顶部导航栏。这个方法确保在不同设备上都能正确显示导航栏，提升用户体验

实例三（vue3 写法）

这个其实跟上面的示例2是一样的，只是我这里用的vue3写法

创建自定义导航栏组件

在 components 文件夹下创建一个自定义导航栏组件，例如 CustomNavbar.vue。

xml 复制代码 
<template>
  <!-- 自定义导航栏的外层容器 -->
  <view class="custom-navbar" :style="{ paddingTop: `${statusBarHeight}px`, height: `${navBarHeight}px` }">
    <!-- 左侧返回按钮 -->
    <view class="left" @click="goBack">
      <text class="iconfont icon-back"></text>
    </view>
    <!-- 中间标题 -->
    <view class="title">{{ title }}</view>
    <!-- 右侧可以添加其他按钮或图标 -->
    <view class="right">
      <!-- 预留区域 -->
    </view>
  </view>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'CustomNavbar', // 组件名称
  props: {
    title: {
      type: String,
      default: '标题' // 默认标题
    }
  },
  setup() {
    // 定义状态栏高度和导航栏高度的响应式变量
    const statusBarHeight = ref(0);
    const navBarHeight = ref(0);

    // 返回上一个页面的方法
    const goBack = () => {
      uni.navigateBack();
    };

    // 组件挂载时获取系统信息并计算导航栏高度
    onMounted(() => {
      const systemInfo = uni.getSystemInfoSync();
      statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度
      // 根据平台计算导航栏高度
      navBarHeight.value = systemInfo.platform === 'android' 
        ? statusBarHeight.value + 48 // Android 导航栏高度
        : statusBarHeight.value + 44; // iOS 导航栏高度
    });

    // 返回响应式变量和方法供模板使用
    return {
      statusBarHeight,
      navBarHeight,
      goBack
    };
  }
});
</script>

<style scoped>
/* 导航栏样式 */
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  padding: 0 10px;
  box-sizing: border-box;
}

/* 左右两侧按钮区域样式 */
.left, .right {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 中间标题样式 */
.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

/* 图标字体样式 */
.iconfont {
  font-size: 20px;
}
</style>

组件使用自定义导航栏组件

在需要使用自定义导航栏的页面中引用并使用该组件，例如在 pages/index/index.vue 中：

xml 复制代码 
<template>
  <!-- 页面主体 -->
  <view>
    <!-- 引入并使用自定义导航栏组件 -->
    <custom-navbar title="首页"></custom-navbar>
    <!-- 页面内容区域，确保内容不被导航栏遮挡 -->
    <view class="content" :style="{ paddingTop: `${navBarHeight}px` }">
      <!-- 你的页面内容 -->
    </view>
  </view>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import CustomNavbar from '@/components/CustomNavbar.vue'; // 引入自定义导航栏组件

export default defineComponent({
  components: {
    CustomNavbar
  },
  setup() {
    // 定义导航栏高度的响应式变量
    const navBarHeight = ref(0);

    // 页面挂载时获取系统信息并计算导航栏高度
    onMounted(() => {
      const systemInfo = uni.getSystemInfoSync();
      const statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
      // 根据平台计算导航栏高度
      navBarHeight.value = systemInfo.platform === 'android' 
        ? statusBarHeight + 48 // Android 导航栏高度
        : statusBarHeight + 44; // iOS 导航栏高度
    });

    // 返回导航栏高度供模板使用
    return {
      navBarHeight
    };
  }
});
</script>

<style scoped>
/* 内容区域样式 */
.content {
  /* 确保内容不被导航栏遮挡 */
}
</style>

总结

  1. 配置 pages.json：配置页面使用自定义导航栏。

  2. 创建自定义导航栏组件：

    • 模板：定义导航栏的布局，包括左侧返回按钮、中间标题、右侧区域。
    • 脚本：使用 Composition API 获取系统信息，计算状态栏和导航栏高度。
    • 样式：定义导航栏和内部元素的样式。

  3. 使用自定义导航栏组件 ：在页面中引入并使用该组件，动态调整内容区域的 paddingTop 确保不被导航栏遮挡。

这样，导航栏可以兼容不同设备，动态适应不同状态栏高度，确保良好的用户体验。

相关推荐
_.Switch1 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j
一路向前的月光1 小时前
Vue2中的监听和计算属性的区别
前端·javascript·vue.js
长路 ㅤ   1 小时前
vite学习教程06、vite.config.js配置
前端·vite配置·端口设置·本地开发
长路 ㅤ   1 小时前
vue-live2d看板娘集成方案设计使用教程
前端·javascript·vue.js·live2d
Fan_web1 小时前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常1 小时前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
二十雨辰2 小时前
[uni-app]小兔鲜-07订单+支付
uni-app
莹雨潇潇2 小时前
Docker 快速入门（Ubuntu版）
java·前端·docker·容器
Jiaberrr2 小时前
Element UI教程：如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho3 小时前
【TypeScript】知识点梳理（三）
前端·typescript
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07pve(Proxmox VE)安装i225v网卡驱动08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点