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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
JavaScript 学习技巧
Feb 17 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
微信小程序Flex布局用法深入浅出分析
Apr 25 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
一个PHP数组应该有多大的分析
2009/07/30 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
vue实现通讯录功能
2018/07/14 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
python requests.get带header
2020/05/05 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
上课看小说检讨书
2014/02/22 职场文书
素质教育标语
2014/06/27 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
圣诞晚会主持词
2015/07/01 职场文书
宿舍管理制度范本
2015/08/07 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js