【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>
相关推荐
一只小风华~22 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
索迪迈科技37 分钟前
java后端工程师进修ing(研一版 || day40)
java·开发语言·学习·算法
十碗饭吃不饱39 分钟前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.1 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
萌新小码农‍1 小时前
Java分页 Element—UI
java·开发语言·ui
Tiger_shl1 小时前
【.Net技术栈梳理】03-核心框架与运行时(异常处理)
开发语言·.net
再睡亿分钟!1 小时前
Spring MVC 的常用注解
java·开发语言·spring boot·spring
MChine慕青2 小时前
顺序表与单链表:核心原理与实战应用
linux·c语言·开发语言·数据结构·c++·算法·链表
qq_195551692 小时前
代码随想录70期day7
java·开发语言
每天吃饭的羊2 小时前
state和ref
前端·javascript·react.js