【uniapp】自定义导航栏时,设置安全距离,适配不同机型

1、在pages.json中,给对应的页面设置自定义导航栏样式

bash 复制代码
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTextStyle": "white",
         "navigationBarTitleText": "首页",
      }
    },

2、定义自定义组件customNavbar,在组件中获取屏幕边界到安全区域的距离

bash 复制代码
<template>
  <view class="navbar" :style="{paddingTop:safeAreaInsets?.top+'px'}">
	<view class="logo">
		<image src="../../static/c1.png" mode=""></image>
		<text>头部导航</text>
	</view>
  >
  <view>
  	<text class="icon-search">搜索</text>
	<text class="icon-scan"></text>
  </view>
  </view>
</template>
<script lang="ts" setup>
const {safeAreaInsets} =uni.getSystemInfoAsync()

console.log(safeAreaInsets)

</script>
相关推荐
ruan1145143 分钟前
Java Lambda 类型推断详解:filter() 方法与 Predicate<? super T>
java·开发语言·spring·stream
猿榜4 分钟前
魔改编译-永久解决selenium痕迹(二)
javascript·python
广东数字化转型6 分钟前
java jar 启动应用程序
开发语言·python
阿幸软件杂货间8 分钟前
阿幸课堂随机点名
android·开发语言·javascript
threelab17 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined218 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
黎明smaly30 分钟前
【排序】插入排序
c语言·开发语言·数据结构·c++·算法·排序算法
辣辣y1 小时前
python基础day08
开发语言·python
用户7579419949701 小时前
基于JavaScript的简易Git
javascript
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js