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的智能提示插件一枚
Feb 18 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
详解JS预解析原理
Jun 16 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 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面向对象概念
2011/11/06 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python判断设备是否联网的方法
2018/06/29 Python
python try 异常处理(史上最全)
2019/03/07 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
经济与贸易专业应届生求职信
2013/11/19 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
2014村务公开实施方案
2014/02/25 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
施工工地安全标语
2014/06/07 职场文书
工地标语大全
2014/06/18 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
出纳岗位职责
2015/01/31 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
七年级作文之游记
2019/12/11 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis