uni-app获取元素高度

例：top部分和bottom部分自定义，middle部分高度自适应：

<template><view><view class="top-box">top部分</view><view class="middle-box" :style="{height:mainHeight+'px'}">middle部分</view><view class="bottom-box">bottom部分</view></view>
</template>

在生命周期 mounted 进行调用

let _this = this;
uni.getSystemInfo({success: function(res) { // res - 各种参数console.log(res);let topinfo = uni.createSelectorQuery().in(_this).select(".top-box");let bottominfo = uni.createSelectorQuery().in(_this).select(".bottom-box");topinfo.boundingClientRect(function(data) { _this.topHeight = data.height; // 获取top部分的高度}).exec()bottominfo.boundingClientRect(function(data) { _this.bottomHeight = data.height; // 获取bottom部分的高度}).exec()// res.windowHeight：获取页面总高度_this.mainHeight = res.windowHeight - _this.topHeight - _this.bottomHeight}
});

打印res：

注：

1、screenHeight是整个手机屏幕的高度；

windowHeight是webview（不包括手机通知栏、小程序标题栏和tabBar）的高度；

2、screenHeight的单位是：rpx；

windowHeight的单位是：px。

参数	参数说明
screenWidth	屏幕宽度
screenHeight	屏幕高度
windowWidth	可使用窗口宽度
windowHeight	可使用窗口高度
windowTop	可使用窗口的顶部位置
windowBottom	可使用窗口的底部位置
statusBarHeight	手机状态栏的高度

uni-app获取元素高度相关推荐

uniapp 获取图片的高度_uni-app获取元素高度等信息，并设置元素top信息
本文主要简介uni-app获取元素信息及设置信息等获取元素高度可查看官方文档 mounted() { const query = uni.createSelectorQuery().in(this ...
uniapp获取元素高度
uniapp获取元素高度官方文档 mounted() {const query = uni.createSelectorQuery().in(this);query.select('#editor' ...
原生js——无法获取元素高度的的问题
原生js--无法获取元素高度的的问题今天遇到了xxx.style.width无法获取元素宽度的问题,原来一直没有注意到这个小细节: 1)如果width:150px:是写在 css 样式表(外链式)里 ...
原生js获取元素高度
原生js获取元素高度 <div id='container'></div> let dom = document.getElementById('contanier')dom. ...
uniapp 动态获取元素高度
vue页面获取元素, app端推荐(这个也兼容H5) //设置mescroll的高度setTimeout(()=>{const query = uni.createSelectorQuery() ...
vue 获取元素高度
<div ref="elememt" > </div> //获取高度值 var height= this.$refs.text.offsetHeight; ...
uniapp 页面滚动获取元素高度
onPageScroll() {let _this = this;let info = uni.createSelectorQuery().select(".entity-box" ...
css 获取元素高度,如何获取没有给出高度的元素的高度？
前言最近在工作中遇到了一个问题,某个需求需要获取元素的高度,就假定是div元素,但是呢因为div中元素的内容是不确定的,所以并没有给div设置高度,在获取高度时,我们首先会想到3中方法 1.div. ...
Vue.js 获取元素高度的方法【记录】
Vue.js获取下面div的height: <div ref="element"></div> 1.获取高度值:(内容高+padding+边框) let h ...
uniapp 获取元素高度
在 uniapp 中,你可以使用 wx.createSelectorQuery() 方法来获取元素的高度.首先,你需要在元素上添加唯一的 id,然后在你的 JavaScript 代码中使用以下代码来获 ...

uni-app获取元素高度

uni-app获取元素高度相关推荐

最新文章

热门文章