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图片的展开和收缩实现代码
Apr 16 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
详解Document.Cookie
Dec 25 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
微信jssdk用法汇总
Jul 16 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
JS实现图片幻灯片效果代码实例
May 21 Javascript
js+css3实现简单时钟特效
Sep 13 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP 转义使用详解
2013/07/15 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python计算文本文件行数的方法
2015/07/06 Python
python机器学习库常用汇总
2017/11/15 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
TensorFlow Session会话控制&Variable变量详解
2018/07/30 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python 实现让字典的value 成为列表
2019/12/16 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
技能比赛获奖感言
2014/02/14 职场文书
房产委托公证书样本
2014/04/04 职场文书
劳资协议书范本
2014/04/23 职场文书
爱国主义演讲稿
2014/05/07 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
CentOS MySql8 远程连接实战
2022/04/19 MySQL