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


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 相关文章推荐
JS实现点击下载的小例子
Jul 10 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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
根德YB400的电路分析
2021/03/02 无线电
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
javascript静态的url如何传递
2007/05/03 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
基层党员对照检查材料
2014/08/25 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
工作检讨书范文
2015/01/23 职场文书
水电工岗位职责
2015/02/14 职场文书