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插件validate验证的小例子
May 08 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
javascript求日期差的方法
Mar 02 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
Websocket 向指定用户发消息的方法
Jan 09 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环境搭建最新方法
2006/09/05 PHP
第七节--类的静态成员
2006/11/16 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
php实现映射操作实例详解
2019/10/02 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
javascript数组详解
2014/10/22 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
JavaScript 绘制饼图的示例
2021/02/19 Javascript
对于Python的框架中一些会话程序的管理
2015/04/20 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python制作词云的方法
2018/01/03 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
中专毕业生自荐信范文
2013/11/28 职场文书
安全横幅标语
2014/06/09 职场文书
企业标语口号
2014/06/10 职场文书
投资意向书
2014/07/30 职场文书
借款协议书
2014/09/16 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python