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 CSS样式控制 学习笔记
Jul 23 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 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守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
工作失职检讨书范文
2014/01/16 职场文书
志愿者服务感言
2014/02/27 职场文书
市场营销方案范文
2014/03/11 职场文书
cf搞笑广告词
2014/03/14 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
不错的求职信范文
2014/07/20 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书