uni.createSelectorQuery()在vue3里boundingClientRect获取到的data是null

于 2024-05-13 11:16:00 发布
阅读量248 收藏
点赞数 4
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yibbay/article/details/138794198
版权 
const inst = getCurrentInstance()
onLoad(() => {
    const childRef = inst.refs.customNavBar.$refs.uniNavBarRef
    const query = uni.createSelectorQuery().in(childRef)
}）

1、切记一定要在onLoad内，vue的onMounted也不一定能成功
2、如果多层级子组件就是如示例代码一直延续下去找子组件

yibbay
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序vue3获取dom信息系统信息钩子封装
前端一线搬运工的博客
06-19 110
【代码】小程序vue3获取dom信息系统信息钩子封装。
关于uniapp中vue3使用uni.createSelectorQuery()时的this指向及查询结果说明
lopoi的博客
08-03 9656
微信小程序 关于uniapp中vue3使用uni.createSelectorQuery()时的this指向及查询结果说明
uniapp中vue3使用uni.createSelectorQuery().in(this)报错
weixin_51293134的博客
09-24 1311
解决办法：使用getCurrentInstance()方法获取组件实例。因为VUE3中使用setup没有this作用域，所以报错。
uniap vue3 组件使用uni.createSelectorQuery() 获取dom报错
最新发布
weixin_47085255的博客
01-15 1176
批量查询时，结果是按照查询的顺序返回的。由于vue3中没有this，所以使用。
uniapp小程序vue3获取dom实例createSelectorQuery
solocao的专栏
01-02 2959
需求，在页面中，有时需要获取渲染组件的长宽信息，可以使用。
uniapp vue3项目内使用uni.createSelectorQuery()提示Cannot read property ‘node‘ of null
weixin_44219322的博客
10-13 1610
在开发过程中使用到uni.createSelectorQuery()方法去获取元素信息，但一直报错Cannot read property ‘node’ of null; 期间使用过nextTick，wx.createSelectorQuery()，也确认是在组件挂载后调用的方法，但均无效果
Vue.js使用axios动态获取response里的data数据操作
10-14
在这个场景中，我们将探讨如何在Vue.js中使用axios动态地从响应(response)对象中获取data数据。 首先，axios发送请求后会返回一个Promise对象，该对象的`then`方法接收两个参数，分别是成功时的回调函数和错误时的...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
vue.global.js，Vue.js 框架的核心文件之一
08-11
3. 全局属性：如 `Vue.config` 用于配置全局行为，`Vue.version` 用于获取 Vue 的版本号。 4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。 5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器...
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
Vue中的this.$options.data()和this.$data用法说明
10-15
在Vue.js框架中，`this.$options` 和 `this.$data` 是两个非常重要的属性，它们分别用于获取组件的配置选项和当前实例的数据对象。在开发过程中，正确理解和使用这两个属性对于管理组件的状态至关重要。 首先，`...
uniapp之boundingClientRect注意事项
钬码狼酷的博客
04-01 5701
uniapp中boundingClientRect使用注意事项，用法、填坑等
关于uni.createSelectorQuery().select(el).boundingClientRect 自定义组件获取不到值
qq_36639113的博客
05-25 3156
uni.createSelectorQuery().select("#scrollview").boundingClientRect(data => { console.log(data) // null }).exec() 在自定义的子组件中，data为null，使用this.$nextTick，setTimeout仍然获取不到值 解决方案： 要用 in(this)，this传入的是自定义组件的实例，否则获取到的data值为null uni.createSelectorQuery().in(t
微信小程序自定义组件boundingClientRect获取到的rect值为null
txl910514的专栏
10-16 8012
解决办法： 在自定义组件内获取必须用SelectorQuery.in() Component({ lifetimes: { ready() { const query = wx.createSelectorQuery().in(this) const num = Math.ceil(this.data.picList.length / LINE_LENGT...
组件中uni.createSelectorQuery()获取到的对象为null （vue2、vue3）
Jelly115的博客
12-09 1690
组件中uni.createSelectorQuery()获取到的对象为null的解决办法
uniapp createSelectorQuery().select 获取返回null报错
qq_36958916的博客
07-27 3420
uniapp createSelectorQuery().select 获取返回null报错
微信小程序自定义组件boundingClientRect取不到值
热门推荐
Pan Fengshan的博客
03-17 1万+
一、问题场景 有些场景下，我们需要在小程序自定义组件中获取某些元素的高度，代码如下： ready: function() { wx.createSelectorQuery().select('.search-content').boundingClientRect(rect=>{ console.log(rect.height) }).exec(); } ...
uniapp createSelectorQuery()方法获取不到节点问题
云雨之石的博客
03-10 2742
uniapp createSelectorQuery()方法获取不到节点问题
boundingclientrect返回null
07-20
boundingClientRect 方法返回 null 的原因可能有几种： 1. 元素尚未被添加到 DOM 中：如果元素尚未被添加到文档中，或者在调用 boundingClientRect 之前没有完成渲染，那么返回的结果将为 null。确保元素已被添加到 DOM 中并且已经完成渲染。 2. 元素具有 display:none 属性：如果元素的 display 属性设置为 none，那么该元素是不可见的，boundingClientRect 方法将返回 null。可以尝试更改元素的显示属性，或者使用 visibility:hidden 属性来隐藏元素。 3. 元素被隐藏或溢出了父容器：如果元素被父级元素的 overflow:hidden 或者 visibility:hidden 隐藏，或者元素本身设置了 visibility:hidden 属性，那么也会导致 boundingClientRect 返回 null。确保元素及其父级元素的可见性。 4. 文档未加载完成：如果在文档加载完成之前调用 boundingClientRect 方法，结果可能为 null。确保在文档加载完成后再调用该方法。 5. 元素尺寸为0：如果元素的宽度或高度为0，那么 boundingClientRect 方法返回的结果也会为 null。检查元素的尺寸是否正确设置。 如果以上情况都不适用，仍然返回 null，可以进一步检查代码逻辑是否正确，或者提供更多相关的代码和上下文信息以便更好地帮助解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值