uni-app 顶部导航栏高度计算 + 胶囊高度计算

文章目录

uni-app 顶部导航栏高度计算 + 胶囊高度计算
uni-app
一、顶部导航栏高度计算
二、胶囊高度计算
总结

uni-app

uni-app中使用自定义导航栏

page.json中设置

"navigationStyle": "custom",

// 消息模块{"path": "pages/news/news","style": {// "navigationBarTitleText": "消息","enablePullDownRefresh": false,"navigationStyle": "custom","usingComponents": {"van-swipe-cell": "/wxcomponents/vant-weapp/swipe-cell/index"}}},

一、顶部导航栏高度计算

onLoad() {let res = uni.getSystemInfoSync();let menu = wx.getMenuButtonBoundingClientRect();this.statusBarHeight = (menu.top - res.statusBarHeight) * 2 + menu.height + res.statusBarHeight;if (res.model.indexOf('iPhone') > -1) {this.statusBarHeight += 4}},

是否需要加上4，需要判断手机的系统

二、胶囊高度计算

// 获取导航栏高度
getSystemStatus() {setTimeout(() => {uni.getSystemInfo({success: function(res) {let menu = wx.getMenuButtonBoundingClientRect(); //获取获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。（top表示上边框到手机顶部的距离 bottom是下边框到手机顶部的距离）
console.log('下至'+menu.bottom,'上至'+menu.top,'这个？'+res.statusBarHeight)
console.log(menu.bottom + menu.top - res.statusBarHeight,'看下参数')}
});
})
},

总结

uni-app中自定义导航栏

uni-app 顶部导航栏高度计算 + 胶囊高度计算相关推荐

解决小程序自定义导航栏和右边胶囊高度一致
名词解释: 1.statusBarHeight:状态栏高度(小程序可获取),是指顶部显示手机信号,时间,电量的那一个小的状态条的高度.如图红色部分. 2.titleBarHeight:标题栏高度(小程 ...
uniapp实现自适应手机状态栏高度的顶部导航栏
 <template><view><block v-if="!onlyShowStatusBar">&l ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
Android 资讯类App项目实战第一章滑动顶部导航栏
前言: 正在做一个资讯类app,打算一边做一边整理,供自己学习与巩固.用到的知识复杂度不高,仅适于新手.经验不多,如果写出来的代码有不好的地方欢迎讨论. 该系列的其他文章第二章 retrofit获取 ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
仿抖音短视频APP源码，顶部导航栏切换详解
仿抖音短视频APP源码,顶部导航栏切换详解的相关代码 class DaoHangNan extends StatefulWidget //继承StatefulWidget{TabController ...
uniapp开发APP实现导航栏顶部搜索功能
效果图如下: 在page.json中配置searchInput {"path": "pages/index/index","style": ...
小程序自定义顶部导航栏
上篇博客自定义了一个底部导航栏,效果还可以,但是我在开发过程中又遇到了一个棘手的问题.就是在底部导航栏的第一个页面需要将页面沉浸到状态栏去,这就麻烦了,因为中间的容器页面无论第几个都是在外面的主界面里 ...

uni-app 顶部导航栏高度计算 + 胶囊高度计算

uni-app 顶部导航栏高度计算 + 胶囊高度计算

文章目录

uni-app

一、顶部导航栏高度计算

二、胶囊高度计算

总结

uni-app 顶部导航栏高度计算 + 胶囊高度计算相关推荐

最新文章

热门文章