微信小程序获取页面元素高度_微信小程序之动态获取元素宽高

我以前一直以为微信小程序不能动态获取view元素的宽高。但是自从看到： wx.createSelectorQuery() 这个api接口，以前的某些问题就能得到解决了。。。

那么，这个api接口怎么用呢？

首先，这个接口会返回一个对象实例。

var obj=wx.createSelectorQuery();

下面的就是返回的对象实例 obj 的所有内容。

返回的 obj 有五个方法：

obj.in(component)：没用过这个方法，多用于组件的选择器。

obj.select(selector)：获取指定的节点，selector是css选择器。返回一个 NodesRef 对象实例，可以用于获取节点信息。

obj.selectAll(selector)：获取指定的节点，selector是css选择器。返回一个 NodesRef 对象实例，可以用于获取节点信息。

上面这两个我感觉就是 js 中querySelector和querySelectorAll的区别。

obj.selectViewport()：我没用过这个方法。官方说是选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息。也是返回一个 NodesRef 对象实例，可以用于获取节点信息。

exec( function(res){} )：执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回

上面返回的 NodesRef 对象实例就很重要了，它有三个方法：

boundingClientRect( function(rect){} )：就是这个方法，能够动态获取view元素的高度、宽度等属性。还有其它的请看官方文档

scrollOffset( function(res) {})：获取节点的水平、垂直滚动的位置等。节点必须是scroll-view或者viewport

fields(fields,function(){res} )：这个可以获取指定元素的自定义属性和class名，具体的请看官方文档的说明。

废话了这么多，真正的实例用法：

wx.createSelectorQuery().selectAll('.npl-intro').boundingClientRect(function(rect){

console.log(rect[0].height)

console.log(rect[0].width)

}).exec()

如果觉得这样写有点长。可以分步写。也是一样的结果。

varobj=wx.createSelectorQuery();

obj.selectAll('.npl-intro').boundingClientRect(function(rect){

console.log(rect[0].height)

console.log(rect[0].width)

})

obj.exec();

当然，这方法可以写在onLoad、onReady、onShow等这些生命周期的方法，也可以写在自定义的方法里。什么时候需要，什么时候就调用。

微信小程序获取页面元素高度_微信小程序之动态获取元素宽高相关推荐

小程序返回上一页_智能小程序档案馆手把手教你成为小程序流量头号玩家（上）...
百度智能小程序为开发者提供了全面开放的自然搜索接入能力为了让开发者们接入得又快又好,我们准备了详细说明给大家了解~ 首先我们了解一个问题:什么是小程序接入自然搜索? 通过接入百度搜索生态,在百度 A ...
微信登录画面_微信登录界面的地球变了_微信登录界面首变真相
细心的小伙伴发现在启动微信的时候,那个经典的一个小人剪影面对着地球的画面开始发生了一些变化,似乎云层变得更为清晰细致了.微信登录界面6年来首变化,那么为何改变来的如此突然呢,下面小编就分享给大家! 手 ...
微信公众号怎么推送消息_微信公众号发送消息
A.模板消息发送模板消息仅用于公众号向用户发送重要的服务通知,只能用于符合其要求的服务场景中,如信用卡刷卡通知,商品购买成功通知等.不支持广告等营销类消息以及其它所有可能对用户造成骚扰的消息. 备注 ...
页面生命周期_微信小程序的生命周期学习笔记-应用篇
在我们学习微信小程序的过程当中,我们会参考很多资料.在这些资料中,我们经常能够看到"生命周期"四个字,在前面的课程中也提到过.在这里做一个说明. 生命周期是一类函数的统称,这些函数 ...
小程序获取城市行政区号_微信小程序省市区选择器实例详解(附源码下载)
微信小程序省市区选择器: 最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换思路是:拿当前的c ...
微信小程序跳过第三方的_微信小程序可以跳转第三方页面吗
随着互联网的发展,小程序定制开发的需求也是越来越多了.客户在寻问小程序开发的时候,小程序跳转外部链接是他们比较关心的问题之一.下面我们将小程序跳转外部链接的规则汇总整理,希望用户对小程序的跳转规则有更 ...
jq动态渲染后获取不到元素高度_浏览器的渲染机制
面试肯定会问到这个吧~ So:再一次的屡屡浏览器的渲染机制~ 在渲染一开始会先从网络层获取请求文档(HTML.XML)的内容,然后再进行以下基本流程 3.1 解析HTML => DOM树从HT ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
c++如何让程序异常以后继续执行_微信商城小程序开发首页广告如何布局？c
小程序的开发使得商家变现微信流量越来越便利,因此各类小程序制作数量不断增加,特别是不少商家选择制作商城类小程序.而在进行小程序制作的时候,是需要布局相应广告来进行流量转化的,那么微信商城小程序开发首页 ...

微信小程序获取页面元素高度_微信小程序之动态获取元素宽高

微信小程序获取页面元素高度_微信小程序之动态获取元素宽高相关推荐

最新文章

热门文章