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

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

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

例如iPhone14Pro max机型，就被挡住了！！！

解决方法如下：

1、在page.json里面配置"navigationStyle": "custom" ——导航栏自定义

 {"path": "pages/index/index","style": {"navigationBarTitleText": "首页",//使用自定义导航栏"navigationStyle": "custom","navigationBarTextStyle": "white"}},

2、设计自定义导航栏布局 

<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、适配不同机型

获取各机型信息

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

 

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

<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>

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