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 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
Jun 18 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
node.js入门学习之url模块
Feb 25 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
vscode自定义vue模板的实现
Jan 27 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
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
Java中final关键字详解
2015/08/10 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php实现微信发红包功能
2018/07/13 PHP
asp 的 分词实现代码
2007/05/24 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
js中switch语句的学习笔记
2020/03/25 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
python机器人行走步数问题的解决
2018/01/29 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
2015新学期开学寄语
2015/02/26 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
Consul在linux环境的集群部署
2022/04/08 Servers