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

这篇具有很好参考价值的文章主要介绍了【uniapp】自定义导航栏时,设置安全距离,适配不同机型+最顶部的状态栏修改字体颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

uniapp修改状态栏颜色,uni-app,javascript,开发语言

    {
      "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>

uniapp修改状态栏颜色,uni-app,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-754397.html

到了这里,关于【uniapp】自定义导航栏时,设置安全距离,适配不同机型+最顶部的状态栏修改字体颜色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 实现不同用户展示不同的tabbar(底部导航栏)

    目录 一、背景 源码地址:包含vue2和vue3版本:cheinlu/tabBar_demo_vue 二、效果展示 三、前置工作 四、创建tabbar组件 五、登录页面根据不同身份进行tabbar切换逻辑 六、问题拓展 最近在做一个uniapp开发的小程序遇到一个需求,希望不同用户登录后展示不同的tabbar页面,但是uniapp项

    2024年02月08日
    浏览(46)
  • 微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

    自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 定义此方法后,头部的导航栏会去掉,导航栏下的元素会直接向上移动到原导航栏的位置,可以再app.json配置成全局沉浸式导航栏,以及在单页面配置沉浸式导航栏。 方式二 使用组件 这里使用

    2024年02月02日
    浏览(52)
  • 【小程序】uni-app自定义导航栏适配小程序,对齐胶囊

    实现效果  自定义导航栏对齐胶囊按钮,实现方法是通过获取胶囊按钮的顶部(top)高度和自身高度(height),动态设置导航栏的样式(style)。 通过uni.getMenuButtonBoundingClientRect(),可以获取胶囊按钮的布局位置信息,包括width、height、top、bottom、left、right。 1、定义变量 2、获

    2024年02月13日
    浏览(71)
  • 微信小程序如何实现自定义导航栏、导航栏手机适配(获取导航栏、状态栏高度和胶囊位置)以及踩过的坑

    背景:不用官方默认的导航栏,想用自己自定义的 实现效果: :顶部状态栏、顶部导航栏、顶部状态导航栏、胶囊 原理: 自定义导航栏无非就是求得导航栏高度,并让内容容器垂直方向居中于导航栏高度 1.获取手机系统状态栏高度 2.获取胶囊位置(包括高度) 3.求得

    2024年03月12日
    浏览(60)
  • uniapp 开发小程序之实现不同身份展示不同的 tabbar(底部导航栏),附带相关问题解答

    效果展示:   引言 在开发过程中逐渐意识到uniapp原生的tabbar可能不能满足开发要求,通过浏览博客才选择使用uView的Tabbar 底部导航栏来实现,我选择用的是2X版本 安装 我是使用Hbuilder插件的方式引入的组件库,安装配置可以看这篇: 下载安装方式配置 | uView 2.0 - 全面兼容

    2024年02月11日
    浏览(41)
  • uniapp自定义头部导航

    uniapp自定义头部导航

    2024年04月12日
    浏览(40)
  • uniapp隐藏底部导航栏(非自定义底部导航栏)

    uniapp官方网址:uni设置TabBar

    2024年02月12日
    浏览(35)
  • uniapp 封装自定义导航栏

    首先把要用的API搞一起,封装一手 主要用到两个,设备系统信息和胶囊按钮信息 uni.getSystemInfoSync() uni.getMenuButtonBoundingClientRect() 这里胶囊宽度我是直接用windowWidth减去left 然后整个导航栏开始封装 我这里直接把全部代码扔上去了,主要思路就是flex布局,然后中间的模块通过定

    2024年02月11日
    浏览(38)
  • uniapp自定义导航和头部

       src/compontents/uni-nav-bar/uni-nav-bar.vue src/compontents/uni-tab-bar/uni-tab-bar.vue src/layout/index.vue src/pages/home/index.vue src/pages/mine/index.vue App.vue global.js main.js page.json .eslintrc.js .prettierrc.js .gitignore忽略文件

    2024年02月09日
    浏览(43)
  • uniapp小程序自定义头部导航

    我们在开发小程序时,自带的头部导航样式往往不能满足需求,故只能自定义导航,接下来简要介绍下如何实现: 1. 去除自带的头部导航 要想自定义头部导航,首先要到pages.json文件夹中,找到对应页面,然后在style中写上代码: 2.封装自定义的头部导航 一个小程序,可能会

    2024年02月11日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包