整个页面的高度设置为 100%,并采用 flex 布局 滚动区域的高度,通过flex布局的flex-grow实现自适配 <template> <!-- 顶部--自定义的导航栏 --> <CustomNavbar /> <!-- 中间--自适配高度的滚动区 --> <scroll-view scroll-y class="contentBox"> <!-- 此处省略了页面内容的相关代码 --> </scroll-v...
$navBarHei:110rpx;//顶部导航栏高度 js 部分 主要是传递数据,可以根据按钮绑定的事件进行处理。 constprops=defineProps({// 文字颜色color:{type:String,default:"#333",},// 背景色bgColor:{type:String,default:"#f8f8f8",},// 边框色borColor:{type:String,default:"#e3e3e3",},// 左边配置left:...
从下图分析出来:导航栏高度 = (胶囊顶部距离 - 状态栏高度) x 2 + 胶囊的高度 data() { return { system:[], menu:[], statusBarHeight: 0, //状态栏的高度 navigatorHeight: 0, //导航栏高度 menuHeight: 0, //胶囊高度 menuTop: 0, //胶囊与顶部的距离 totalHeight: 0, //总高度 } }, on...
上图已经获取到了导航栏的高度 这个方法 只有APP有效 小程序和 H5 是获取不了的。小程序应该是可以的 但是我不行 小程序获取方法如下: 代码在这里: let systemInfo = uni.getSystemInfoSync(); const system = systemInfo.platform var statusBarHeight = systemInfo.statusBarHeight 1. 2. 3. 如果嫌太麻烦 ...
var(--status-bar-height)此变量在微信小程序环境为固定25px,在 App 里为手机实际状态栏高度。 当设置"navigationStyle":"custom"取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为var(--status-bar-height)的 view 放在页面顶部,避免页面内容出现在状态栏。
var(--status-bar-height)此变量在微信小程序环境为固定25px,在 App 里为手机实际状态栏高度。 当设置"navigationStyle":"custom"取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为var(--status-bar-height)的 view 放在页面顶部,避免页面内容出现在状态栏。
uni.getSystemInfo({//获取系统信息success:res=>{letnavHeight=menuButtonObject.height+(menuButtonObject.top-res.statusBarHeight)*2;//导航栏高度=菜单按钮高度+(菜单按钮与顶部距离-状态栏高度)*2this.titleBarHeight=navHeight;this.statusBarHeight=res.statusBarHeight},fail(err){console.log(err);}})}...
//导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度。 this.$options.globalData.customBar = custom.bottom + custom.top - e.statusBarHeight // #endif // #ifdef MP-ALIPAY this.$options.globalData.customBar = e.statusBarHeight + e.titleBarHeight ...
在开发uni-app的时候，顶部导航栏的高度很多小伙伴都获取不到，下面小编教大家获得uni-app顶部导航栏的高度。方法/步骤 1 首先打开开发工具，新建一个项目，如下图所示 2 然后直接定义头部的样式，如下图所示 3 接着在css中直接用var(--status-bar-height)，如下图所示 4 在获取高度的时候注意搭配条件编译进行...