uniapp 如何自定义导航栏并自适应机型

如今的移动设备有各种不同的屏幕形状,如刘海屏、水滴屏等。这些异形屏会影响页面的布局,尤其是导航栏和底部栏的显示。通过获取安全区域信息,可以确保页面内容不会被异形屏的特殊区域遮挡。

在设计页面顶部导航栏时,可以根据 **safeAreaInsets.top**的值来调整导航栏的位置,使其在不同设备上都能正确显示,避免被刘海区域遮挡。

例如iPhone14Pro max机型,就被挡住了!!!

解决方法如下:

1、在page.json里面配置**"navigationStyle": "custom"** ------导航栏自定义
javascript 复制代码
 {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        //使用自定义导航栏
        "navigationStyle": "custom",
        "navigationBarTextStyle": "white"
      }
 },
2、设计自定义导航栏布局
TypeScript 复制代码
<template>
  <view class="navbar">
    <!-- logo文字 -->
    <view class="logo">
      <image class="logo-image" src="@/static/images/logo.png"></image>
      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
    </view>
    <!-- 搜索条 -->
    <view class="search">
      <text class="icon-search">搜索商品</text>
      <text class="icon-scan"></text>
    </view>
  </view>
</template>
3、适配不同机型

获取各机型信息

javascript 复制代码
<script setup lang="ts">
//获取屏幕边界到安全区域的距离
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets);
</script>

动态设置样式::style="{ paddingTop: safeAreaInsets?.top + 'px' }"

html 复制代码
<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <image class="logo-image" src="@/static/images/logo.png"></image>
      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
    </view>
    <!-- 搜索条 -->
    <view class="search">
      <text class="icon-search">搜索商品</text>
      <text class="icon-scan"></text>
    </view>
  </view>
</template>

设置完之后就不会挡住啦!!!!

相关推荐
纪元A梦6 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生9 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了9 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风14 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风15 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
24k小善20 分钟前
FlinkSql入门与实践
java·大数据·flink·云计算
CodeCraft Studio33 分钟前
Excel处理控件Spire.XLS系列教程:Java设置Excel活动工作表或活动单元格
java·python·excel
海底火旺35 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺36 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码36 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试