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 Jcrop插件实现图片选取功能
Nov 23 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 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
实用函数8
2007/11/08 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
js面试题之异步问题的深入理解
2020/09/20 Javascript
详解flask表单提交的两种方式
2018/07/21 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python中如何添加自定义模块
2020/06/09 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
好家长事迹材料
2014/01/23 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
运动会广播稿150字
2014/02/19 职场文书
教师对学生的寄语
2014/04/03 职场文书
美术专业自荐信
2014/07/07 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js