【uniapp】自定义导航栏时，设置安全距离,适配不同机型+最顶部的状态栏修改字体颜色

春晓_春眠花落

已于 2023-10-16 13:56:23 修改

阅读量4.1k

点赞数 2

文章标签： uni-app javascript 开发语言

于 2023-10-05 16:37:37 首次发布

本文链接：https://blog.csdn.net/weixin_49668076/article/details/133580810

版权

1、在pages.json中，给对应的页面设置自定义导航栏样式，navigationStyle设为custom（自定义）时，导航栏的字体颜色自动变成白色了，如果有需要就设为black

在这里插入图片描述

    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTextStyle": "black",//修改最顶部状态栏的字体颜色可选white/black
         "navigationBarTitleText": "首页",
      }
    },

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

<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.getSystemInfoSync()

console.log(safeAreaInsets)

</script>