uniapp-全端开发-自我爬坑记录-顶部自定义导航栏刘海屏适配

最新推荐文章于 2024-06-24 16:25:43 发布
最新推荐文章于 2024-06-24 16:25:43 发布
阅读量2k 收藏 7
点赞数
分类专栏： uniapp 文章标签： vue.js css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32733763/article/details/107384173
版权
本文记录了在uniapp中，如何解决顶部自定义导航栏在小程序中无法适配iPhone X刘海屏的问题。通过获取系统信息的statusbarHeight并结合css内置变量--status-bar-height，实现了动态适配。
摘要由CSDN通过智能技术生成

顶部自定义导航栏使用css内置变量–status-bar-height在小程序表现为都是25px，无发适配iphoneX的刘海屏。可以通过获取系统信息的statusbarHeight来动态实现。

mounted() {
   
	this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
},

//navigation-bar是posision:fixed;top:0;
<navigation-bar
最低0.47元/天 解锁文章
RubyCat-Max
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp - [全端兼容] 高性能 tabbar 底部菜单凸起效果，原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面（底部菜单中间自定义一个图片并悬浮起来）
王佳斌
06-28 4621
uniapp如何实现底部凸起按钮，uniapp tabbar底部菜单怎么自定义，uniapp怎么让底部菜单中间突出来，uniapp自定义底部tabbar，uniapp高性能好用的底部菜单，uniapp自定义底部导航栏并解决闪烁问题，uniapp 怎么设置凸起的底部tabbar，uniapp怎么用系统的底部菜单 还想让中间的按钮凸起来，uniapp自定义tabbar性能不好怎么办，uni-app自定义导航栏实现中间凸起效果，uniapp底部导航栏中间圆形按钮凸起效果详细代码，uni-app自定义中间图标突起的
uniapp - 全端兼容 “选项卡瞄点定位“ 功能，点击后滚动到锚点位置并且选项卡自动吸顶，当 “经过“ 锚点时自动定位选项卡（详细运行示例源码，超详细注释稳定可靠！）支持H5、App、小程序全平台
王佳斌
03-29 4668
uniapp瞄点选项卡，uniapp锚点，uniapp H5 微信小程序 APP平台锚点定位，uniapp锚点链接，uniapp实现商品详情锚点定位效果，uniapp项目如何实现锚点定位功能，uniapp 微信小程序 h5网页如何使用锚点定位效果，uniapp如何实现锚点跳转，使用uniapp如何实现锚点定位和滚动监听功能，uni-app H5 小程序中使用锚点定位，uni-app添加锚点和监听滚动切换tab，uniapp实现点击吸顶锚点定位，uniapp滚动吸顶+锚点+滚动自动tab切换，uniapp锚点
uniapp刘海屏适配
松岛川树
10-02 611
新建一个js文件 getPhoneInfo.js (也可以直接写在mian.js) export const getPhoneInfo = () => { const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息 let statusBarObj = { statusBarHeight: 20 /* 状态栏默认高度 */ /...
uni-app自定义小程序导航栏，适配刘海屏幕。
m0_58358831的博客
03-11 4112
<template> <view class="content"> <!-- 背景图片 包含状态栏的标题--> <image class="logo" src="背景图片路径" mode=""></image> <!-- 状态栏的占位--> <view class="boxAndTop" :style="{height:statusBarHeight+'px...
uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置
最新发布
weixin_65363325的博客
06-24 491
2.样式，设置最外层盒子的padding-top的值。介绍：同步获取系统信息。
uniapp顶部状态栏设置（适配刘海屏）
梦翼横空的专栏
03-14 1978
最顶部放一个高度为“var(--status-bar-height)”的div。
微信小程序 uniapp - iPhoneX 刘海屏适配
zxh7770的博客
09-09 1165
一、js直接调用wx.getSystemInfoSync Page({ data: { isIPhoneX:false, }, onLoad: function () { this.setData({ "isIphoneX": this.isIphoneX() }) }, isIphoneX() { let res = wx.getSystemInfoSync(); if (res.screenHeight == 812 || res.sc
uniapp兼容iPhoneX头部状态栏(刘海屏）和底部小横条
学习
06-17 5460
兼容iphoneX头部状态栏（刘海屏）和底部小横条，效果展示
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
uniapp(全端兼容) - 最新详细实现腾讯地图轨迹回放功能，uniapp腾讯地图点击按钮播放地图绘制的轨迹，并自定义在轨道上行驶的汽车图片图标、汽车顶部文字信息、自定义轨道样式（详细示例运行代码）
高级前端工程师
05-17 3711
uni-app，腾讯地图，地图轨迹，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，在腾讯地图上画行驶轨迹并让一辆车在上面跑，如何在uniapp小程序中实现腾讯地图轨迹回放，在uni-app所有平台上兼容腾讯地图，报错，uniapp中实现实时定位和轨迹回放，汽车沿轨迹行驶功能，使用腾讯地图api实现轨迹回放，腾讯地图轨迹移动用什么API，显示小车轨迹动画回放，UniApp使用腾讯API地图、路线轨迹、marker标记点，对车辆行驶轨迹进行轨迹
uni-app解决自定义导航栏，刘海屏的适配问题
qq_45797421的博客
06-28 7170
uni-app在微信小程序上，自定义导航栏解决刘海屏的适配问题 如果使用的是uni-app的自定义导航栏组件 uni-nav-bar 自定义导航栏，则设置 statusBar为true即可 如果是自己写的自定义导航栏组件，解决刘海屏的适配问题，就是解决状态栏的高度问题，通过uni-app的接口来获取到当前设配的状态栏高度，并在组件中添加一个元素并设置高度为 获取到的状态栏高度； <template> <view class="music-head" :style="{color:co
uni-app 自定义导航栏-解决适配问题
路虽远行则将至，事虽难做则必成。
09-08 982
在实际开发中我们是根据需求，原型图，功能配色来开发，并不是考虑这个组件是不是能实现首页我们不需要跳转时，会出现标题左移，渐变色，输入框，等等布局，原生导航栏就不满足需求这时我们需要自定义导航栏，uni-app 确实提供了css变量，告诉我们手机系统栏高度，胶囊按钮高度，但我们写死时会因为不同的机型，导致页面的布局破坏，这是因为不同手机分辨率，缩放有差异，会导致系统栏，胶囊按钮差异，这是如果我们高度全局写死就会乱。换个角度思考，那为什么微信自己封装的代码，就可以适配这些问题-是因为它把高度写活了。
解决uniapp状态栏高度和刘海屏适配问题
--=
09-28 1732
【代码】解决uniapp状态栏高度和刘海屏适配问题。
uniapp 如何自定义导航栏并自适应机型
weixin_47970498的博客
09-01 2059
本文介绍了如何在 Uniapp 中自定义导航栏并自适应不同机型的屏幕大小。使用 `nav-bar` 组件可以方便地自定义导航栏。
解决uni-app开发中刘海屏下背景不能全屏铺满的问题
FantasyWeirdo的博客
07-06 6175
使用原生占位（仅App端支持） mainfest.json 文件 app-plus 节点下配置 safearea "safearea": { "background": "#CCCCCC", "bottom": { "offset": "auto" } } 不使用原生占位（非App端可以不配置mainfest） mainfest.json 文件 app-plus 节点下配置 safearea "safearea": { "bott
uniapp怎么给页面添加整个页面的背景颜色
qq_50952645的博客
06-19 1575
1、打开page.json文件，添加一下画红色的代码（顶部导航栏的背景颜色 ）2、在页面添加页面颜色以及高度。
uniapp - 强力覆盖 checkbox 复选框样式兼容全端app
11-11
Uniapp是一个基于Vue.js的跨平台应用开发框架，它强力覆盖了checkbox复选框样式，使得复选框在不同的移动端app上都能有良好的兼容性。 在Uniapp中，开发者可以通过简单的代码实现复选框的样式定制和覆盖。这意味着...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值