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 相关文章推荐
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
AngularJS实现路由实例
Feb 12 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
python中pass语句用法实例分析
2015/04/30 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
介绍一下游标
2012/01/10 面试题
求职信模板怎么做
2014/01/26 职场文书
学生周末长期请假条
2014/02/15 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
小学体育组工作总结
2015/08/13 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python