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. Netty(一):的入门使用。

    Netty的入门基本使用流程代码,不做具体分析.使用版本为Netty 4.x版本. 服务端调用示例: 绑定端口号为8080端口 package com.cllover; import com.sun. ...

  2. JavaIO流,万物皆文件

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

  3. 2020-07-20:你觉得redis有什么缺点,给你改进的话你会怎么改进?

    福哥答案2020-07-20: 1.由于 Redis 是内存数据库,短时间内大量增加数据,可能导致内存不够用.2.redis是单线程的,单台服务器无法充分利用多核服务器的CPU.3.遇到大量查询时容易 ...

  4. 2020-04-08:为什么TCP握手需要三次?

    假想一下,如果我们去掉了第三次呢?如果只是第二次建立的话,服务端和客户端就已经建立,但是如果客户端没有收到服务端的回应?这个时候,客户端认为没有建立,服务端却为认为建立成功,并保存了必要的资源,如果出 ...

  5. Vue 过滤器 Filter传递参数

    给日期类型过滤器设置不同格式 dayjs是一款轻量级的日期操作库 https://day.js.org/en import Vue from 'vue' import dayjs from 'dayj ...

  6. day5 字符串 函数

    字符串 1.单引号,双引号,三引号括起来的都是字符串    索引  从0开始  str[0]    遍历   for循环    判断字符串中是否都是数字    ,字母  返回bool型         ...

  7. SSM整合 完美支持RESTful(Jsp和客户端<android ios...>)

    一 RESTful简介 RESTful是一种网络应用程序的设计风格和开发方式 它结构清晰 符合标准 易于理解 扩展方便 REST 即Representational State Transfer的缩写 ...

  8. idea生成SpringBoot项目后再次调出依赖

    插眼 https://www.cnblogs.com/cosmos-wong/p/12908580.html

  9. JavaScript学习系列博客_13_JavaScript中的对象(Object)简介

    对象 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性.除了那5种基本数据类型,就是对象. 分类:1.内建对象- 由ES标准中定义的对象,在任何的ES的实现中都可以使用- 比如:Ma ...

  10. Mybatis入门(二)------增删改查

    Mybatis增删改查基本操作 一.XML实现方式 1.mapper.xml的配置 <?xml version="1.0" encoding="UTF-8" ...