wx.createSelectorQuery()返回值为null的解决方案

最新推荐文章于 2024-07-11 16:06:53 发布

惜__缘

最新推荐文章于 2024-07-11 16:06:53 发布

阅读量5.3k

点赞数 2

分类专栏：工作笔记

本文链接：https://blog.csdn.net/liudan123012/article/details/107687527

版权

工作笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在我的工作项目中需要通过wx.createSelectorQuery()获取一个元素的高度来设置另一个元素的margin值，然后wx.createSelectorQuery()返回的值为null。

我查了百度，找到了一位前辈的解决方案。

wx.createSelectorQuery().in(this)   // .in(this) 的使用

运行结果：

能访问到数据了，非常感谢那位前辈的分享！

当然，如果是你要获取的元素是要通过后台数据渲染的，你也可以将其放到异步请求成功函数中。

******前辈分享的方案：

我的解决方案是在某个耗时较久的异步事件的成功回调中调用，比如我要动态计算高度的view是用于装载某个数据列表的，那么我就在获取这个异步数据的成功回调中获取所需计算的wxml节点的信息，然后再设置所需的高度。

使用定时器来解决，也就是页面载入后延时几秒钟才去获取。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

惜__缘

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

wx.createSelectorQuery().select微信小程序获取dom节点位置

hangGe0111的博客

12-27

3527

1.场景：在某些情况下需要用到某个元素距离顶部的距离。 1.1场景一：例如在某些小程序的详情页，由于页面展示的内容特别多，页面有好几屏的高度，辣么庞大的数据量，放在一个接口里显然是不合理的（小程序setData有1024大小限制；如果数据太大请求时间会比较长用户的页面等待时间特别长，总之一句话用户体验不好），所以就需要把接口分开为几个，同时小程序对于页面的进程数有限制（好像是5个还是几个...

wx.createSelectorQuery().select().boundingClientRect().exec方法无限循环

m0_50871362的博客

04-12

1521

// An highlighted block let query = wx.createSelectorQuery(); let $topInformation = query.select('#view'); let $scrollView = query.select('#view2'); $topInformation.boundingClientRect((rect)=>{ $scrollView.boundingClientRect((rect2)=>{ console.log

3 条评论您还未登录，请先登录后发表或查看评论

createSelectorQuery获取对象为null

weixin_46449470的博客

06-30

2351

wx.createSelectorQuery().in(this).select(’#’ + id); Taro小程序同理 const query = wx.createSelectorQuery().in(this); query .select(`#${id}`) .fields({ node: true, size: true, }) .exec((res) => { .

微信小程序组件中createSelectorQuery().select()结果为null

weixin_44646763的博客

08-23

3458

组件中createSelectorQuery().select()结果为null

小程序问题

最新发布

u013195452的专栏

07-11

403

wx.createSelectorQuery().in(this) //组件中加in(this)，不然获取不到。

createSelectorQuery返回null

noMore_h的博客

05-06

558

需要在nextTick中获取元素信息，dom渲染后获取 Taro.nextTick(async () => { const query = Taro.createSelectorQuery() query.select('#slide_text').boundingClientRect(rec => { console.log(rec) }).exec() console.log(query) })

小程序wx.createSelectorQuery()

qq_41818857的博客

09-10

6391

在PC项目中，想要获取元素很简单，有很多种方式如getElementId,querySelect。。。但在小程序中如何获取呢？步骤一：获取SelectorQuery 对象实例 var query = wx.createSelectorQuery() //返回一个SelectorQuery 对象实例步骤二：使用SelectorQuery 对象方法如： var nodesRef= query.select("#my") //返回一个NodesRef 对象实例步骤三：使用nodesRef对象方法如：

微信小程序createSelectorQuery获取偶尔为null

weixin_51263829的博客

03-22

383

异步渲染了，加了个定时器，不合理但好用。

小程序节点查询的API - wx.createSelectorQuery()。

学习记录

11-27

1万+

官网地址 age({ queryMultipleNodes: function(){//声明节点查询的方法 var query = wx.createSelectorQuery()//创建节点查询器 query query.select('#the-id').boundingClientRect()//这段代码的意思是选择Id=the-id的节点，获取节点位置信息的查询请求...

微信小程序在组件中获取界面上的节点信息wx.createSelectorQuery

weixin_30768661的博客

06-18

1159

节点信息查询 API可以用于获取节点属性、样式、在界面上的位置等信息。最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。示例代码： const query = wx.createSelectorQuery() query.select('#the-id').boundingClientRect(function(res){ res.top // #...

微信小程序 WXML节点信息查询详解

01-03

const query = wx.createSelectorQuery();//【返回节点查询对象：SelectorQuery】 //组件内，则用this.createSelectorQuery()；或者query .in(this); 节点查询对象：SelectorQuery .in(this) //限定范围为自身组件,...

微信小程序点击滚动到指定位置的实现

10-15

首先，我们要了解微信小程序提供的API——`wx.createSelectorQuery()`。这个API允许我们查询页面中的节点信息，包括位置、大小等。下面是一段示例代码，用于实现点击后滚动到指定位置： ```javascript let query = ...

微信小程序(四) 节点查询 | wx.createSelectorQuery

看客

09-15

9705

createSelectorQuery createIntersectionObserver 节点查询

mySQL微信小程序的div_微信小程序操作dom元素节点 wx.createSelectorQuery()

weixin_28786857的博客

01-28

197

Page({//声明节点查询的方法queryMultipleNodes: function() {const query = wx.createSelectorQuery() // 创建节点查询器 queryquery.select('#productServe').boundingClientRect() // 这段代码的意思是选择Id=productServ...

微信小程序节点查询wx.createSelectorQuery()的使用

weixin_42065274的博客

03-05

1万+

微信小程序操作dom节点——wx.createSelectorQuery() 使用场景：页面滑动到dom节点时，需要执行一些操作 var query = wx.createSelectorQuery();//创建节点查询器 query query.select('#id').boundingClientRect()//选择Id=id的节点，获取节点位置信息的查询请求 query.selectViewport().scrollOffset()//获取页面滑动位置的查询请求 query.exec(fun

微信小程序操作dom元素节点 wx.createSelectorQuery()

热门推荐

越努力，越幸运！

11-30

8万+

WXML <view> <text class="title" id="productServe">产品服务</text> <text class="title" id="enterpriseServe">企业服务</text> <text clas

封装小程序节点查询wx.creatSelectorQuery()

前端程序媛_Ying博客

03-19

270

二次封装，获取小程序里轮播图的高度。

wx.createSelectorQuery(）拿到的值为空

山河野

07-06

9362

wx.createSelectorQuery(）拿到的值为空通过wx.createSelectorQuery().in(that)获取不到节点，必须通过定时器来获取（setTimeout在onLoad里面写） setTimeout(function(){ let heightArr = []; let s = 0; wx.createSelectorQuery().in(that).select...

微信小程序 wx.createSelectorQuery 和 this.createSelectorQuery 的差异

qq_35248327的博客

03-20

1742

微信小程序 wx.createSelectorQuery 和 this.createSelectorQuery 的差异

wx.createselectorquery()

03-16

wx.createSelectorQuery() 可以用来在页面上选择 DOM 节点并使用它们的相关信息。是的，您的理解是正确的。在小程序中，使用 `wx.createSelectorQuery()` 方法可以创建一个 `SelectorQuery` 对象，该对象可以用于选择页面中的 DOM 节点并获取它们的相关信息，例如节点的位置、大小、样式等等。这些信息可以用于实现一些复杂的交互效果和动画效果，提升小程序的用户体验。wx.createSelectorQuery() 是一个用于创建查询节点信息的 API。在小程序中，我们通常使用它来获取节点信息，比如获取某个节点的位置、大小等属性。具体来说，我们可以先调用 wx.createSelectorQuery() 方法创建一个查询对象，然后使用该对象的 select() 方法来指定我们要查询的节点，最后使用该对象的相应方法获取节点信息。以下是一个示例代码： ``` // 在页面中定义一个 ID 为 myNode 的节点 <view id="myNode"></view> // 在页面中使用 wx.createSelectorQuery 获取 myNode 的节点信息 const query = wx.createSelectorQuery() query.select('#myNode').boundingClientRect(function(rect){ console.log(rect.width) // 输出节点的宽度 }).exec() ``` 在上述代码中，我们先在页面中定义了一个 ID 为 myNode 的节点，然后使用 wx.createSelectorQuery() 创建了一个查询对象。接着，我们使用该对象的 select() 方法来指定要查询的节点，并使用 boundingClientRect() 方法来获取节点的位置和大小等信息。最后，我们调用 exec() 方法来执行查询操作。在查询完成后，我们就可以通过相应的回调函数来获取节点信息了。需要注意的是，wx.createSelectorQuery() 方法返回的是一个 SelectorQuery 对象，而非真正的节点信息。因此，我们必须在执行查询操作时传入相应的回调函数来获取节点信息。