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. python2.3嵌套if结构:

    #案例:存款100万的请款下,买宝马:老爸资助大于50万买宝马740:大于30万买宝马520:小于20万宝马320.存款大于50万小于100万买丰田:大于20万小于50万买二手车:小于20万自行车! ...

  2. 2020 重新出发,JAVA 学习计划

    ------ @[toc]# 前言 我呢已经工作七年了,一直没有换工作,因为我这个人没什么太大的野心,安安稳稳的生活就挺好,目前的公司虽然福利一般,但是工作稳定,环境也都很熟悉了. 但是今年,到目前为 ...

  3. VSCode 自定义Vue snippets, 快速生成Vue模板

    命令行 Ctrl+Shift+P # 选择 Configure User Snippets # 选择 Vue.json 原始的Vue.json { // Place your snippets for ...

  4. 靶机练习 - ATT&CK红队实战靶场 - 1. 环境搭建和漏洞利用

    最近某个公众号介绍了网上的一套环境,这个环境是多个Windows靶机组成的,涉及到内网渗透,正好Windows和内网渗透一直没怎么接触过,所以拿来学习下. 下载地址:http://vulnstack. ...

  5. c++ sort函数三个参数解释

    第一个参数 一般为 排序的起始点 vector.begin()(起点) 或者其他位置 第二个参数 一般为 排序的终止点 vector.end() (终点) 或者其他位置 第三个参数是排序函数 对于一些 ...

  6. Kerberos认证原理及基于Kerberos认证的NFS文件共享

    目录 Kerberos认证原理 简介 client访问server过程 一.Authentication Service Exchange (AS Exchange) 二.Ticket Grantin ...

  7. 如何使用screen命令

    大家好,我是良许. 很多时候,我们都需要执行一些需要很长时间的任务.如果这时候,你的网络连接突然断开了,那么你之前所做的所有工作可能都会丢失,所做的工作可能都要重做一遍,这会浪费我们许多的时间,非常影 ...

  8. Java并发-Synchronized关键字

    一.多线程下的i++操作的并发问题 package passtra; public class SynchronizedDemo implements Runnable{ private static ...

  9. 【POJ2976】Dropping tests - 01分数规划

    Description In a certain course, you take n tests. If you get ai out of bi questions correct on test ...

  10. javaSE总结(转+总结)

    一:java概述: 1,JDK:Java Development Kit,java的开发和运行环境,java的开发工具和jre. 2,JRE:Java Runtime Environment,java ...