uni-app vue2 安卓 ios web slider组件都不能通过id获取节点信息 vue3可以
uni-app vue2 安卓 ios web slider组件都不能通过id获取节点信息 vue3可以
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 11 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Mac
手机系统：Android
手机系统版本号：Android 15
手机厂商：华为
手机机型：oppo
页面类型：vue
vue版本：vue2
打包方式：离线
操作步骤：
- 运行上述代码
预期结果：
- 可以拿到节点信息
实际结果：
- 拿不到
bug描述：
使用下面的代码运行到web，app端
```vue
<template>
<slider id="slider"></slider>
</template>
<script>
export default {
methods: {
handleClick() {
const query = uni.createSelectorQuery().in(this);
query
.select("#slider")
.boundingClientRect((data) => {
console.log("data: ", data);
})
.exec();
}
}
}
</script>
更多关于uni-app vue2 安卓 ios web slider组件都不能通过id获取节点信息 vue3可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4 回复
这是一个已知的uni-app在Vue2中的兼容性问题。在Vue2版本中，uni.createSelectorQuery()方法无法正确获取slider组件的节点信息，但在Vue3版本中可以正常工作。
原因分析：
- 在Vue2环境下，uni-app对原生组件(如slider)的DOM节点处理存在差异
- 原生组件在Vue2中可能没有完全映射到DOM树中
临时解决方案：
- 使用ref替代id选择器：
<template>
<slider ref="mySlider"></slider>
</template>
<script>
export default {
methods: {
handleClick() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query
.select(`.uni-slider[data-ref=${this.$refs.mySlider._uid}]`)
.boundingClientRect((data) => {
console.log("data: ", data);
})
.exec();
});
}
}
}
</script>