【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>
相关推荐
iOS阿玮35 分钟前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
源猿人1 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin1 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
xw52 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 小时前
uni-app中v-if使用”异常”
前端·uni-app
小桥风满袖3 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬4 小时前
Promise 的场景和最佳实践
前端·javascript
Asort4 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio4 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly4 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试