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


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 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
基于jquery编写分页插件
Mar 07 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
Vue动态面包屑功能的实现方法
Jul 01 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
js hover 定时器(实例代码)
2013/11/12 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
javascript中的正则表达式使用详解
2015/08/30 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
int在python中的含义以及用法
2019/06/27 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
linux面试题参考答案(4)
2013/01/28 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
生产内勤岗位职责
2013/12/07 职场文书
《老王》教学反思
2014/02/23 职场文书
广告词串烧
2014/03/19 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
行政复议决定书
2015/06/24 职场文书
2019年工作总结范文
2019/05/21 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
python实现会员信息管理系统(List)
2022/03/18 Python