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. Java入门到实践系列(1)——Java简介

    一.Java的发展历史 Java是由SUN公司的开发人员James Gosling及其领导的一个开发小组与1995年开发并推出的一门高级编程语言.经过二十几年的发展已经成为最受程序员欢迎.使用最为普遍 ...

  3. JavaIO流,万物皆文件

    引入IO的原因 基本概念: 数据源和流的概念 IO流的概念细分 IO流的体系 IO流在Java中的流对象:inputStream .... Java对象的序列化和反序列化: 1 为什么需要序列化和反序 ...

  4. 使用Luhn算法实现信用卡号验证

    问题描述: 2:信用卡号的验证 [信用卡号的验证] 当你输入信用卡号码的时候,有没有担心输错了而造成损失呢?其实可以不必这么 担心,因为并不是一个随便的信用卡号码都是合法的,它必须通过 Luhn 算法 ...

  5. Spring IOC 启动过程

    1. 引言 本篇博文主要介绍 IOC 容器的启动过程,启动过程分为两个步骤,第一个阶段是容器的启动阶段,第二个阶段是 Bean 实例化阶段,这两个阶段各自需要执行的步骤如下图,接下来会一一介绍. 需要 ...

  6. rocketMq安装及集群配置

    网上关于rocketMq安装.集群配置的文章有很多,作为一个初学者,跟着网上的各种教程安装遇到了各种坑,可谓是一路坎坷.本文记录下rocketMq安装的完整过程.希望对你有一点帮助 安装rocketM ...

  7. JDK1.8源码学习-HashMap

    JDK1.8源码学习-HashMap 目录 一.HashMap简介 HashMap 主要用来存放键值对,它是基于哈希表的Map接口实现的,是常用的Java集合之一. 我们都知道在JDK1.8 之前 的 ...

  8. 逃离CSDN -慕舲的黑夜-第三期

    来时,是朋友推荐查资料,后来看到CSDN的UI,好华丽高大上,也读了CSDN首页推荐的一些文章,加入CSDN. 可是后来随着博客园,蓝奏云,w3c菜鸟教程,等平台的出现,CSDN越来越令人心寒

  9. ElasticSearch实战系列八: Filebeat快速入门和使用---图文详解

    前言 本文主要介绍的是ELK日志系统中的Filebeat快速入门教程. ELK介绍 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是 ...

  10. Centos7第一安装后无法联网