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 确保不被导航栏遮挡。

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

相关推荐
web147862107235 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247806 分钟前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖10 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案117 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_7482548822 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.33 分钟前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营38 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play