微信小程序实现动态获取元素宽高的方法分析
作者:站住,别跑 发布时间:2024-04-23 09:12:37
本文实例讲述了微信小程序实现动态获取元素宽高的方法。分享给大家供大家参考,具体如下:
我以前一直以为微信小程序不能动态获取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)
}) ;
当然,这方法可以写在onLoad
、onReady
、onShow
等这些生命周期的方法,也可以写在自定义的方法里。什么时候需要,什么时候就调用。
注意:如果要获取通过
wx:if
和setData
来实现显示与隐藏的元素,调用的这个方法的时候可能出现获取到的内容为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() 接口
希望本文所述对大家微信小程序开发有所帮助。
来源:https://www.cnblogs.com/zjjDaily/p/9566234.html
猜你喜欢
- Urllib3是一个功能强大,条理清晰,用于HTTP客户端的Python库。许多Python的原生系统已经开始使用urllib3。Urlli
- 通常情况下我们在更新数据时需要先从数据库里将原数据取出后放在内存里,然后编辑某些字段或属性,最后提交更新数据库。使用F方法则可以帮助我们避免
- MSDN上看了一下说是sql server 2005不支持在分布式事务处理中存在指向本地的链接服务器(环回链接服务器)个人尝试了下是由于在双
- 互联网是一个飞速发展的行业,任何的止步不前都会导致被淘汰,只是时间早晚的问题,所以一个公司的学习与创新能力是非常重要的,特别是对于一个年轻的
- 一:工具准备Anaconda:是一个开源的Python发行版本,其中包含了conda、Python等180多个科学包及其依赖项。【Anaco
- 摘要本文主要介绍了利用python的 threading和queue库实现多线程编程,并封装为一个类,方便读者嵌入自己的业务逻辑。最后以机器
- 前言K-Means 聚类算法的目标是将 n 个样本划分(聚类)为 K 个簇,在博文《OpenCV与机器学习的碰撞》中,我们已经学习利用 Op
- 执行以下SQL,即OK咯叻!! SQL:alter database 数据库名称 SQL_Latin1_General_CP1_CI_AS
- 如下所示:# _*_ coding:utf-8 _*_#------------------------------------------
- 发现问题比解决问题重要,使用php集成开发环境Appserv网页会提示各种语法错误,但自己配置开发环境无法提示错误,特别当不是语法错误,比如
- 定义:select语句中嵌套select语句,被嵌套的select语句是子查询。子查询可以出现在:select ....(select)..
- 实现类似ios端微信的左滑显示置顶、删除按钮的功能,首先需将按钮部分设为绝对定位,并且right设为负值溢出屏幕。利用小程序事件处理的api
- 为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不
- 由于本人经常装系统,每次装完系统之后都要重新安装一些软件,安装软件的时候又要上网查找安装的教程,比较麻烦,所以自己整理了MySQL5.7.2
- 0x00 is与====运算符是比较两个对象的内容是否相等,默认情况是调用对象的__eq__方法进行比较;而is是比较两个对象是否一样,它比
- 本文实例讲述了js显示世界时间的方法。分享给大家供大家参考,具体如下:<!DOCTYPE HTML PUBLIC "-//W
- 前言Golang 提供了database/sql包用于对SQL数据库的访问, 作为操作数据库的入口对象sql.DB, 主要为我们提供了两个重
- 很多网友在浏览网页时应该会发现很多网页有显示时间和日期的功能,这个不难,使用可视化网页制作软件Drea
- TKinterPython 的 GUI 库非常多,之所以选择 Tkinter,一是最为简单,二是自带库,不需下载安装,随时使用,跨平台兼容性
- 1:定义存储过程,用于分隔字符串DELIMITER $$USE `mess`$$DROP PROCEDURE IF EXISTS `spli