问题描述
使用uni.createIntersectionObserver提示找不到dom,实际有dom
复现步骤
<template>
<view class="target"></view>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted } from 'vue'
export default defineComponent({
setup() {
const observer = uni.createIntersectionObserver(getCurrentInstance()?.proxy)
onMounted(function () {
console.log(document.querySelector('.target'))
observer.relativeToViewport({ right: 0, bottom: 0 }).observe('.target', ({ intersectionRatio }) => {
observer.disconnect()
console.log('intersectionRatio', intersectionRatio)
})
})
},
})
</script>
<style lang="scss">
.target {
margin: 25vh auto;
width: 200rpx;
height: 200rpx;
background-color: #f00;
}
</style>
预期结果
uni.createIntersectionObserver正常执行
实际结果
uni.createIntersectionObserver执行不正常,提示找不到对应的dom
系统信息:
- 发行平台: H5平台
- 操作系统 chrome
- HBuilderX版本 vscode
- uni-app版本
├─ @dcloudio/uni-app-plus@3.0.0-alpha-3031220220222002
│ ├─ @dcloudio/uni-app-vite@3.0.0-alpha-3031220220222002
│ └─ @dcloudio/uni-app-vue@3.0.0-alpha-3031220220222002
├─ @dcloudio/uni-app-vite@3.0.0-alpha-3031220220222002
├─ @dcloudio/uni-app-vue@3.0.0-alpha-3031220220222002
├─ @dcloudio/uni-app@3.0.0-alpha-3031220220222002
- 设备信息 chrome debugger
补充信息
源代码: uni-app-vue3-bug
6条答案
按热度按时间evrscar21#
arknldoa2#
ar7v8xwq3#
selector
不能设置成当前组件的最外层元素,因为6008行
那的$el
就是最外层元素,再用最外层元素querySelector
,是找不到本身的希望官方能优化这个问题
7eumitmz4#
halo,请问您解决了吗,我也是这个api 一直报 $el.queryselector is not a function
wlsrxk515#
在自定义组件中在包一层就可以了
6tqwzwtp6#
这样写可以