微信小程序实现动态获取元素宽高的方法分析


Posted in Javascript onDecember 10, 2018

本文实例讲述了微信小程序实现动态获取元素宽高的方法。分享给大家供大家参考,具体如下:

我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了。。。

那么,这个api接口怎么用呢?

首先,这个接口会返回一个对象实例。

var obj=wx.createSelectorQuery();

下面的就是返回的对象实例 obj 的所有内容。

微信小程序实现动态获取元素宽高的方法分析

返回的 obj 有五个方法:

1.  obj.in(component):没用过这个方法,多用于组件的选择器。

2.  obj.select(selector):获取指定的节点,selector是css选择器。返回一个 NodesRef 对象实例,可以用于获取节点信息。

3.  obj.selectAll(selector):获取指定的节点,selector是css选择器。返回一个 NodesRef 对象实例,可以用于获取节点信息。

上面这两个我感觉就是 js 中querySelector和querySelectorAll的区别。

4. obj.selectViewport():我没用过这个方法。官方说是选择显示区域,可用于获取显示区域的尺寸、滚动位置等信息。也是返回一个 NodesRef 对象实例,可以用于获取节点信息。

5. exec( function(res){} ):执行所有的请求,请求结果按请求次序构成数组,在callback的第一个参数中返回

上面返回的 NodesRef 对象实例就很重要了,它有三个方法:

1. boundingClientRect( function(rect){} ):就是这个方法,能够动态获取view元素的高度、宽度等属性。还有其它的请看官方文档

2. scrollOffset( function(res) {}):获取节点的水平、垂直滚动的位置等。节点必须是scroll-view或者viewport

3. fields(fields,function(){res} ):这个可以获取指定元素的自定义属性和class名,具体的请看官方文档的说明。

废话了这么多,真正的实例用法:

wx.createSelectorQuery().selectAll('.npl-intro').boundingClientRect(function (rect) {
  console.log(rect[0].height)
  console.log(rect[0].width)
}).exec()

如果觉得这样写有点长。可以分步写。也是一样的结果。

var obj=wx.createSelectorQuery();
obj.selectAll('.npl-intro').boundingClientRect(function (rect) {
  console.log(rect[0].height)
  console.log(rect[0].width)
})
obj.exec() ;

或者在exec中返回,如果出现上面的方式出现获取到的 rect 是 null 的话,可以考虑用下面这种,就不会出现问题。结果是一样的。

var obj=wx.createSelectorQuery();
obj.selectAll('.npl-intro').boundingClientRect();
obj.exec(function (rect) {
  console.log(rect[0].height)
  console.log(rect[0].width)
}) ;

当然,这方法可以写在onLoadonReadyonShow等这些生命周期的方法,也可以写在自定义的方法里。什么时候需要,什么时候就调用。

注意:如果要获取通过wx:ifsetData来实现显示与隐藏的元素,调用的这个方法的时候可能出现获取到的内容为null。我的解决办法是加个定时器:因为这个获取元素的方法是异步的,所以只有拖延点时间再去获取,不然有可能元素还未加载出来,就调用了这个方法,当然返回的结果就是null了。

//动态设置高度
setTimeout(function () {
  var query = wx.createSelectorQuery();
  query.select('.nd-btnBox').boundingClientRect();
  query.exec(function (rect) {
    if (rect[0] === null) return;
    that.setData({
      marginBM: rect[0].height + 10
    })
  });
}, 500)

官方 wx.createSelectorQuery() 接口

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
JavaScript 代码压缩工具小结
Feb 27 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
javascript类型转换使用方法
Feb 08 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
AngularJS表单验证功能分析
May 26 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
正则表达式基础与常用验证表达式
Jun 16 Javascript
PM2自动部署代码步骤流程总结
Dec 10 #Javascript
vue路由前进后退动画效果的实现代码
Dec 10 #Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 #Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 #Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 #Javascript
express 项目分层实践详解
Dec 10 #Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 #Javascript
You might like
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
非常实用的php验证码类
2016/05/15 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python iter()函数用法实例分析
2018/03/17 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python实现KNN分类算法
2019/10/16 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
《自选商场》教学反思
2014/02/14 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
英语通知范文
2015/04/22 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Python实现简繁体转换
2021/06/07 Python
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
cypress测试本地web应用
2022/06/01 Javascript
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android