uni-app 组件里面获取元素宽高的实现


Posted in Javascript onDecember 27, 2019
遇到的问题:直接在组件的mounted里面创建选择器,获取元素的宽高,即使扔到定时器里面执行,还是偶尔会有获取不到的情况

解决办法:

uni-app 组件里面获取元素宽高的实现

// 写法一:
getDescBox() { 
  uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => { 
   if (result) { 
     console.log('==========',result) 
   }else { 
     this.getDescBox(); 
 } 
  }).exec(); 
},

// 写法二:
getDescBox() { 
  uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect().exec((res)=>{ 
   if (res\[0\]) { 
     this.descHeight \= res\[0\].height; 
 }else { 
     this.$nextTick(()=>{ 
      this.getDescBox(); 
 }) 
   } 
  }) 
},

两种写法一模一样...

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 #Javascript
JavaScript获取当前url路径过程解析
Dec 27 #Javascript
前端开发之便利店收银系统代码
Dec 27 #Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 #Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 #Javascript
React中使用UMEditor的方法示例
Dec 27 #Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
PHP实现计算器小功能
2020/08/28 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python常用列表数据结构小结
2014/08/06 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
结婚典礼证婚词
2014/01/11 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
行政复议答复书
2015/07/01 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server