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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 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
分享最受欢迎的5款PHP框架
2014/11/27 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
vue实现文件上传功能
2018/08/13 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
django框架自定义用户表操作示例
2018/08/07 Python
用python写测试数据文件过程解析
2019/09/25 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
2014自荐信的写作技巧
2014/01/28 职场文书
开学季活动策划方案
2014/02/28 职场文书
服务承诺书范文
2014/05/19 职场文书
教师个人考察材料
2014/12/16 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
二年级数学教学反思
2016/02/16 职场文书
公证书
2019/04/17 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
Java中的Kotlin 内部类原理
2022/06/16 Java/Android