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


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 相关文章推荐
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
vue实现评价星星功能
Jun 30 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
Zend的MVC机制使用分析(二)
2013/05/02 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
python pytest进阶之fixture详解
2019/06/27 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
计算机专业职业生涯规划范文
2014/01/19 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
理解python中装饰器的作用
2021/07/21 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
如何解决php-fpm启动不了问题
2021/11/17 PHP
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫