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 相关文章推荐
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
再谈JavaScript线程
Jul 10 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
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
PHP 进程锁定问题分析研究
2009/11/24 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
19个Android常用工具类汇总
2014/12/30 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python中sys.argv函数精简概括
2018/07/08 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
django+echart数据动态显示的例子
2019/08/12 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
某公司部分笔试题
2013/11/05 面试题
房地产销售员的自我评价分享
2013/12/04 职场文书
法定代表人授权委托书
2014/04/04 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
教师节祝酒词
2015/08/11 职场文书
Python Socket编程详解
2021/04/25 Python
vue选项卡切换的实现案例
2022/04/11 Vue.js