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插件开发基础简单介绍
Jan 07 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
使用node.js搭建服务器
May 20 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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实现图片上传、剪切功能
2016/05/07 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
强制设为首页代码
2006/06/19 Javascript
Sea.JS知识总结
2016/05/05 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python的词法分析与语法分析
2013/05/18 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python写一个随机点名软件的实例
2019/11/28 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
业务部经理岗位职责
2014/01/04 职场文书
小学教师节活动方案
2014/01/31 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
慈善募捐倡议书
2015/04/27 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
「月刊Action」2022年5月号封面公开
2022/03/21 日漫
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang