微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法。分享给大家供大家参考,具体如下:
我以前一直以为微信小程序不能动态获取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)
希望本文所述对大家微信小程序开发有所帮助。
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析相关推荐
- 微信小程序view动态长度_微信小程序 关于控件尺寸动态计算的问题
自定义相机界面,顶部80rpx,底部210rpx,中间剩余高度填充相机视频流view. 实现思路是获取屏幕高度,减去顶部80rpx再减去底部210rpx,结果赋值给相机视频流view的高度.这个高度需 ...
- 微信小程序view动态长度_微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】...
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 >我是view标签,我现在的宽度是{{v ...
- 微信小程序获取页面元素高度_微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- 小程序组件获取元素宽高失效 和canvas绘制问题
解决办法: 在自定义组件内获取必须用SelectorQuery.in() Component({lifetimes: {ready() {const query = wx.createSelector ...
- vue-preview动态获取图片宽高并增加旋转功能
vue-preview是一个常用的图片查看器,微博网页版就是用的这个插件: 我在项目中也用过这个插件,总体来说,还是比较满意.但是缺少一个图片旋转功能. 安装使用 第一步:安装 npm i vue-p ...
- Unity 在代码中 动态改变RectTransform位置及宽高 的方法整理
原文链接(尊重原著):[100个 Unity实用技能] | Unity 在代码中 动态改变RectTransform位置及宽高 的方法整理_unity 修改recttransform_呆呆敲代码的小Y ...
- android 通过图片url获取宽高_通过 URL 获取图片宽高优化
一张小图.png 前言 客户端研发时,有时会有这样的需求,需要根据图片链接地址获取图片的宽高来进行界面排版. 一般比较正规的做法,是服务端在返回数据时将图片的信息属性一起带回来,这也符合轻客户端设计规 ...
- Glide获取网络图片宽高,并动态设置图片宽高
因Android手机屏幕尺寸较多,当imageview宽设置match_parent,高固定时.会导致图片拉伸或裁剪.目前可通过获取图片宽高,动态设置imageview宽高比例,等比例缩放图片. ...
- 微信小程序自带地图_微信小程序之map地图
微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({ ...
最新文章
- ajax hapi上传文件,javascript – hapi.js Cors Pre-flight不返回Access-Control-Allow-Origin标头...
- Java程序员从笨鸟到菜鸟之(一百零六)java操作office和pdf文件(四)页面列表导出cvs,excel、pdf报表.
- 东八区转为0时区_初中会考重要知识点:地理时区计算技巧全掌握
- 给定a和n,计算a+aa+aaa+a...a(n个a)的和(大数据处理)
- React学习(8)—— 高阶应用:不使用ES6、JSX实现React
- 解决ECLIPSE 卡死的方法
- Netty文章目录汇总
- Internet网络通信协议
- Noi2001 食物链(入门oj Problem 1706)
- phpyun怎么采集_phpyun采集
- 华为认证云计算考什么?
- 基于递归神经网络(RNN)的口语理解(SLU)
- maxcomputer内建函数按字母排序
- Go 内存管理与垃圾回收
- 一文掌握GSEA,超详细教程!
- 2019年的最后一天,你会想些啥?
- 这3种直觉思维,会让你越来越“穷”!
- 乐优商城个人笔记中-商城系统框架知识
- 描述逻辑(Description Logics)
- DBSyncer mysql 增量 配置
热门文章
- cxf添加拦截器_在CXF API和拦截器中添加Gzip压缩
- hibernate 序列_Hibernate身份,序列和表(序列)生成器
- q7goodies事例_Java 8 Friday Goodies:Lambda和XML
- tomcat 轮询_用Spring长轮询Tomcat
- Java 8中的可重复注释
- 如何添加自动更新Play Framework 2.X项目的版本号
- WildFly 10 CR 2发布– Java EE 7,Java 8,Hibernate 5,JavaScript支持热重载
- java 分析java死锁_有益的CountDownLatch和棘手的Java死锁
- 使用Apache Zookeeper进行协调和服务发现
- MOXy的@XmlVariableNode – JSON模式示例