微信小程序获取自定义组件中节点信息为null

最新推荐文章于 2023-05-21 18:11:54 发布
最新推荐文章于 2023-05-21 18:11:54 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44353287/article/details/117409742
版权

今天在做微信小程序时遇到一个很坑的问题，在自定义组件内要获取一个节点的信息，始终都是null

首先，在组件中获取节点，需要添加.in(this)

wx.createSelectorQuery().in(this)

其次，执行代码放到ready生命周期里，如果还是null，可以给函数添加定时器，让页面渲染完成后再执行函数。

如果是要跨组件，例如在主页面获取子组件的节点，需要使用跨组件的后代选择器，详见官方文档。

https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.select.html

bzcoder
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序-自定义组件-遮罩层
05-05
在微信小程序开发中，自定义组件是提升代码复用性和模块化的重要手段。遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此...
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
在微信小程序开发中，自定义组件是提升代码复用性和应用可维护性的重要手段。本教程将探讨如何利用canvas 2D API来实现一个高效、可定制的环形进度条自定义组件。Canvas 2D 提供了一套丰富的绘图接口，让我们能够...
微信小程序自定义组件使用wx.createSelectorQuery()获取不到节点问题
S筱潇S四维Smile
08-19 2939
微信小程序自定义组件使用wx.createSelectorQuery()获取不到节点问题
微信小程序获取节点的位置返回null
qq_44709795的博客
03-12 1673
解决办法：尽量避免动态生成元素节点，若避免不了，就设置个定时器，在页面加载几秒后再调用该方法获取元素节点位置信息，或者在页面滑动时去拿位置信息，代码逻辑处理根据需求去处理。微信小程序获取元素节点时，返回值为null的原因，是因为元素在页面数据渲染前，先调用的微信小程序的方法，此时元素节点还未渲染出来，所以拿不到节点位置，返回null。
Vue父组件向子组件传递对象，但是对象值取不到
m0_61781282的博客
04-25 522
Vue父组件向子组件传递对象类型的变量，父组件在created赋值，子组件在mounted时接收，在控制台可以看到子组件接收的参数，但是当开始赋值时确一直报null。刚开始各种生命周期都试了，无论是created还是mounted都没用。解决办法：可以在子组件中使用v-if来延迟渲染，等数据赋值玩以后再显示。
vue3初始化时父组件传给子组件值，子组件获取不到值
qq_43474235的博客
05-21 4391
首先，分析原因，因为先渲染子组件的DOM后渲染父组件，但是当父组件获取到值后，子组件已经渲染完成，这样就导致初始化时，子组件获取不到值，可以通过，先判断数据是否获取到，再渲染子组件来解决这个问题。最近的项目开发也算是正式的接触到了vue3,在使用过程中也遇到了好多坑，比如、父组件给子组件传值，子组件在onMounted中获取不到值，使用reactive定义数组，赋不了值等等。赋不上值的原因是，reactive使用的Object.assign()进行对数据的浅拷贝，导致数据无法赋值。
微信小程序selectComponent返回null的问题排查与分析
生擒嫦娥炖玉兔的博客
12-26 1万+
要想小程序界面好看，还原UI妹纸设计的界面，小程序自带的组件肯定是无法满足所有需求的。那想要还原比较炫酷好看的UI的时候就必不可少需要自定义组件了。写过许多自定义组件了，也遇到过许多坑，这里说一个比较头大的坑，就是引入自定义组建的时候，使用selectComponent获取自定义组件对象时，返回null的问题。 简单示例 因为这里我们说的主要是selectCom...
关于小程序createSelectorQuery 的取值为null解决
weixin_41436338的博客
05-27 2377
useEffect(() => { getTabToTop(); // 获取tabDom距离顶部值 },[]) // 获取tab距离顶部的高度值 const getTabToTop = () => { const queryDom = Taro.createSelectorQuery(); queryDom .select("#tab_box") .boundingClientRect((rec) => { se..
微信小程序各种自定义组件
05-10
组件的wxml结构请看dist/components/下的组件 样式文件可直接引用dist/components/wux.wxss 插件及文档 ActionSheet - 上拉菜单 Backdrop - 背景幕 Barcode - 条形码 Button - 浮动按钮 Calendar - 日历 CountDown ...
详解微信小程序自定义组件的实现及数据交互
10-16
微信小程序自定义组件是开发小程序时经常会用到的一个特性，它允许开发者封装可复用的UI组件，提高代码的重用性和项目的可维护性。本文将深入探讨如何实现微信小程序的自定义组件以及如何在组件间进行数据交互。 ...
微信小程序--自定义选择颜色（组件）
07-29
1、微信小程序、颜色、组件、可自定义选择 2、该资源科用于用户自定义选择喜欢的颜色 3、已经封装成组件，可以直接调用即可 4、成功运用于网上用户，体验效果好 5、想要的小伙伴可以直接拿去使用，方便快捷高效的...
微信小程序createSelectorQuery获取偶尔为null
weixin_51263829的博客
03-22 325
异步渲染了，加了个定时器，不合理但好用。
记录wx.createOffscreenCanvas，离屏画布的坑property ‘getContext‘ of undefined
wkq_1212的博客
03-15 1901
property 'getContext' of undefined，离屏画布，wx.createOffscreenCanvas
微信小程序如何获取自定义组件中properties的属性并修改，以及父组件和子组件相互传值
热门推荐
weixin_42125732的博客
03-31 3万+
原因：因为自己想了解组件中properties里面的值如何获取到而记录这篇文章 一、自创自定义组件，在json文件夹写上“component”：true 二、父组件的操作步骤 2.1.在json文件夹加上使用组件 2.2 在js文件中写好要传的数组数据 2.3 在wxml页面进行父组件传子组件的值，用属性传值 三、字组件在自己的JS中properties接收父组件传过来的值，定义好type属性和value为[]，即为默认值（父组件传过来的值） 四、用observers监听properties的属性
微信小程序 selectComponent 获取组件为 null
Sport_18的博客
01-18 2160
最近在做一个需求时偶尔发现一个 bug ，排查很久后发现是因为调用 this.selectComponent 时没有获取到组件的问题。 分析 没有在父组件渲染时的生命周期中调用，所以不会是页面和组件的渲染流先后问题 在其地方调用时能获取到，所以不会是组件的问题 只有在某些时间点调用才会是 null ，分析那些时间点所做的操作 原因 在那个时间点里改变的一个值的判断，而组件使用 wx:if 来判断是否显示组件，而当不显示组件时，调用 this.selectComponent 为 null 总结 .
微信小程序获取某个组件的属性值
gaoyangfeng的博客
10-08 1万+
最近开发微信的小程序，由于之前只是学习了一点JS的相关知识，知道在WEB开发中有document对象，用这个机制可以获取任意节点的各种属性，但是在微信小程序里却没有，网上搜集了各种资料终于知道怎么弄了，微信某一个组件的属性可以（不知道是不是只能）用时间的触发来获取），例如input组件可以在定义组件事件的时候获取想要的属性值，然后存入page的data对象自定义的变量里边。 Page({ /...
微信小程序wx.createCanvasContext废弃，使用wx.createOffscreenCanvas接口的绘制canvas 2d海报遇到的踩坑经验。
life_wanghexu的博客
08-13 3662
微信小程序wx.createCanvasContext废弃，使用wx.createOffscreenCanvas接口的绘制canvas 2d海报遇到的踩坑经验。
小程序空显示undefined_『 Vue小Case 』- Vue Prop中的 null vs undefined
weixin_39550379的博客
11-25 457
本文会同步发布在微信公众号歪码行空，欢迎关注交流~！『 Vue 小 Case 』- Vue Prop 中的 null vs undefined 前言：本文将引入两个 Vue 中比较特殊的使用场景，带领大家熟悉一下null和undefined的区别，然后再分析一下 Vue 中是怎么对 Props 做校验的，最后给出大佬是怎么解释的。一直以来，笔者在使用 Vue 时，习惯于在需要表示 prop 属性...
Uniapp使用自定义组件，props传值为undefined
lsp的博客
09-25 3604
最近在使用uniapp和HXbuilder来开发微信小程序，却发现一个很奇怪的问题，我按照官方文档的写法来由父组件对子组件使用prop进行传值，但是子组件却一直收不到父组件传入的值。
微信小程序修改自定义组件样式
最新发布
10-27
微信小程序中修改自定义组件样式有两种方法：一种是通过在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时对暴露出来的class进行class覆盖；另一种是通过设置组件的styleIsolation属性来控制样式隔离。其中，第一种方法可以实现样式的局部修改，而第二种方法可以实现样式的全局修改。 具体实现方法如下： 1. 局部修改样式： 在组件的js文件中将需要修改的标签class暴露出来，例如： ``` Component({ externalClasses: ['my-class'] }) ``` 在组件的wxml文件中找到需要修改的标签，例如： ``` <view class="my-class">我是组件内部标签</view> ``` 在引用组件的页面中使用组件，并对暴露出来的class进行class覆盖，例如： ``` <my-component class="text"></my-component> ``` 在引用组件的wxss文件中修改样式，例如： ``` .text { color: red; } ``` 2. 全局修改样式： 在组件的js文件中设置options属性，例如： ``` Component({ options: { addGlobalClass: true } }) ``` 在引用组件的页面中使用组件，例如： ``` <my-component></my-component> ``` 在引用组件的wxss文件中修改样式，例如： ``` .my-class { color: red; } ``` 其中，addGlobalClass属性等价于设置styleIsolation属性为apply-shared，但是如果设置了styleIsolation属性，则addGlobalClass属性会失效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值