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 相关文章推荐
js跑步算法的实现代码
Dec 04 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
angular.element方法汇总
Jan 07 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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垃圾回收机制引用计数器概念分析
2013/06/24 PHP
discuz目录文件资料汇总
2014/12/30 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP实现百度人脸识别
2019/05/06 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
Use Word to Search for Files
2007/06/15 Javascript
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
中专生的个人自我评价
2013/12/11 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL