【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>
相关推荐
Tony Bai9 小时前
释放 Go 的极限潜能:CPU 缓存友好的数据结构设计指南
开发语言·后端·缓存·golang
仲夏幻境9 小时前
js利用ajax同步调用如何
开发语言·javascript·ajax
鹿鹿鹿鹿isNotDefined10 小时前
Pixelium Design:Vue3 的像素风 UI 组件库
前端·javascript·vue.js
运维行者10 小时前
知乎崩了?立即把网站监控起来!
前端·javascript·后端
aramae10 小时前
详细分析平衡树--红黑树(万字长文/图文详解)
开发语言·数据结构·c++·笔记·算法
一百天成为python专家10 小时前
python爬虫入门(小白五分钟从入门到精通)
开发语言·爬虫·python·opencv·yolo·计算机视觉·正则表达式
一米八二的矮个子10 小时前
JavaScript语法进阶(一)
javascript
Mr YiRan10 小时前
多线程性能优化基础
android·java·开发语言·性能优化
liyi_hz200810 小时前
O2OA (翱途)开发平台新版本发布预告:架构升级、性能跃迁、功能全面进化
android·java·javascript·开源软件
熊猫钓鱼>_>10 小时前
Java String 性能优化与内存管理:现代开发实战指南
java·开发语言·性能优化