let _this=this
let height=""
const query = uni.createSelectorQuery()
query.select('#u-dropdown').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
// debugger
res[0].top // #the-id节点的上边界坐标
res[1].scrollTop // 显示区域的竖直滚动位置
// _this.height=res.windowHeight-res[0].top +'px'
// =_this.height
height=uni.getSystemInfoSync().screenHeight
_this.viewHeight=height-res[0].top-res[0].height
_this.contentStyle={
zIndex: -1,
opacity: 0,
height:_this.viewHeight+'px'
}
// console.log('打印高度',_this.viewHeight);
// console.log('打印demo的元素的信息',res);
})
}

  

uniapp 获取元素高度 距离顶部高度等的更多相关文章

  1. jquery获取元素到页面顶部距离

    jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

  2. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  3. JS获取滚动条距离顶部高度

    一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); ...

  4. scroll 方法 获取滚轴距离顶部高度

    $(window).scroll(function(){ var supportPageOffset = window.pageXOffset !== undefined; // 判断是否支持page ...

  5. uni-app获取元素宽高封装

    getElSize(id) { //得到元素的size return new Promise((res, rej) => { uni.createSelectorQuery().select(' ...

  6. 获取Javascript 滚动条距离顶部的距离(兼容IE6+,火狐,谷歌,其它没测)

    document.body.scrollTop || document.documentElement.scrollTop

  7. jquery获取元素与屏幕高度距离

    a. onscroll事件 scroll是css样式中overflow的一个值,意思是显示滚动条;当一个元素的实际高度超过他的最大高度是,只要设置了overflow为scroll b. $(..).s ...

  8. js计算元素距离顶部的高度及元素是否在可视区判断

    前言: 在业务当中,我们经常要计算元素的大小和元素在页面的位置信息.比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了).有时还要进一步知道,元素是全部都显示在 ...

  9. jquery获取元素到屏幕底的可视距离

    jquery获取元素到屏幕底的可视距离 要打对号的图里的height(我自称为可视高度:滚动条未滑到最底端)  不是打叉图里的到页面底部(滚动条到最底部时的height)(offset().top方法 ...

随机推荐

  1. 移动物体监控系统-sprint3移动监控主系统设计与开发

    一.移动监控的原理 通过获取摄像头图像,比较前后每一帧的图像数据,从而实现移动物体监控.所有移动监控原理都是这样,只是图像帧的对比的算法不一样. 二.移动物体监控系统的实现 选择开源的移动监控软件mo ...

  2. 8道python练习题,能做出来的没几个

    变量的定义 程序就是用来处理数据的,而变量就是用来存储数据的 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道 ...

  3. CSS基础知识(下)

    3.层叠 稍微复杂的样式表中都可能存在两条甚至多条规则同时选择一个元素的情况.CSS通过一种叫作层叠(cascade)的机制来处理这种冲突. 层叠机制的原理是为规则赋予不同的重要程度.最重要的是作者样 ...

  4. idea括号选中时出现一条下滑线(突出显示)打开或关闭方法

    打开设置 Editor->code Editing->Matched brace取消这个对勾

  5. C#LeetCode刷题-记忆化

    记忆化篇 # 题名 刷题 通过率 难度 329 矩阵中的最长递增路径   31.0% 困难

  6. Vue Vuex 严格模式+实例解析+dispatch/commit + state/getter

    1.严格模式 import getters from './getters' import mutations from './mutations' import actions from './ac ...

  7. vue 三元表达式当出现elif

    方式一: <span class="person_name">{{item.type_name == '车商' ? item.title : item.type_nam ...

  8. 日记——递归or搜索?

    好久没发博了,今天发一篇. 这两天学校功课比较紧,编程稍微放了放做题量. 抽空学了学深搜,感谢zah同学给我讲解dfs,浅显易懂,我很快就适应了. 做了几个基础题,没有想象中那么难(菜鸡BB,因为题简 ...

  9. Android 用空格作为分割符切割字符串

    项目中有需要用到空格作为分割符切割字符串,进而转为List. String wordStore = edWord.getText().toString(); String[] word = wordS ...

  10. jmeter性能测试入门使用参数化

    我经常使用jmeter进行接口测试,这个工具还是很好用的.昨天收到一个需求,需要压测一下接口,jmeter进行接口测试,使用cvs文件进行多个数据参数化. 临时准备了一下发现忘记怎么做参数化了,自己百 ...