uni-app中如何使用uni.createSelectorQuery().in(this)

uni-app中如何使用uni.createSelectorQuery().in(this)

开发环境 版本号 项目创建方式
Mac 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：3.1.12

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：8plus

页面类型：nvue

打包方式：离线

操作步骤：

const query = uni.createSelectorQuery().in(this);
query.exec(data => {
console.log(data)
})
这里报错 安卓正常
TypeError: undefined is not an object (evaluating 'n.children') __ERROR 

预期结果：

和安卓一样

实际结果：

ios报错

bug描述：

const query = uni.createSelectorQuery().in(this);
query.exec(data => { })

这里报错 安卓正常
TypeError: undefined is not an object (evaluating 'n.children') __ERROR

更多关于uni-app中如何使用uni.createSelectorQuery().in(this)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中如何使用uni.createSelectorQuery().in(this)的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的nvue页面中，iOS平台使用uni.createSelectorQuery().in(this)出现TypeError: undefined is not an object (evaluating 'n.children')错误，这是已知的平台兼容性问题。

原因分析： nvue页面在iOS和Android底层渲染机制不同，iOS使用原生渲染，对DOM查询的支持存在差异。当组件结构复杂或渲染时机不匹配时，iOS可能无法正确获取节点信息。

解决方案：

  1. 添加延迟执行：
setTimeout(() => {
  const query = uni.createSelectorQuery().in(this)
  query.select('#element').boundingClientRect(data => {
    console.log(data)
  }).exec()
}, 100)
  1. 检查组件生命周期： 确保在onReady或mounted生命周期后执行查询：
onReady() {
  this.$nextTick(() => {
    const query = uni.createSelectorQuery().in(this)
    query.exec(data => {
      console.log(data)
    })
  })
}
  1. 验证节点存在性：
const query = uni.createSelectorQuery().in(this)
query.select('#element').boundingClientRect().exec((data) => {
  if (data[0]) {
    console.log(data[0])
  }
})
回到顶部