【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>
相关推荐
Kiri霧3 小时前
Linux下的Rust 与 C 的互操作性解析
c语言·开发语言·rust
赵庆明老师3 小时前
Uniapp微信小程序开发:http请求封装。
http·微信小程序·uni-app
雪芽蓝域zzs3 小时前
uniapp AES 加密解密
开发语言·uni-app·c#
我是高手高手高高手3 小时前
uni-app x 左右滑动效果
uni-app
雨夜的星光3 小时前
Python JSON处理:load/loads/dump/dumps全解析
开发语言·python·json
fen_fen4 小时前
Java打包时,不将本地Jar打包到项目的最终 JAR 中
开发语言·python·pycharm
灵感__idea5 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
excel6 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
wjs20246 小时前
SQL AND & OR 操作符详解
开发语言
~光~~7 小时前
【环境配置 】WSL2 +ubuntu20.04 +Qt配置+Kits配置
开发语言·qt·ubuntu