uni-app 在vue3中使用uni.createIntersectionObserver找不到dom节点的问题(实际有相关dom节点)

a7qyws3x 于 4个月前发布在 uni-app

关注(0)|答案(6)|浏览(57)

问题描述
使用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

uni-app

来源：https://github.com/dcloudio/uni-app/issues/4017

6条答案

按热度按时间

evrscar21#

onMounted(() => {
  nextTick(() => getDom());
});
const getDom = async () => {
  const instance = getCurrentInstance(); // 获取实例
  let query = uni.createSelectorQuery().in(instance);
  query
    .select(". target")
    .boundingClientRect((res: any) => {
      console.log("boundingClientRect:", res)
    })
    .exec();
};

赞(0）回复(0）举报 4个月前

arknldoa2#

赞(0）回复(0）举报 4个月前

ar7v8xwq3#

selector 不能设置成当前组件的最外层元素,因为 6008行 那的 $el 就是最外层元素,再用最外层元素 querySelector ,是找不到本身的

希望官方能优化这个问题

赞(0）回复(0）举报 4个月前

7eumitmz4#

halo，请问您解决了吗，我也是这个api 一直报 $el.queryselector is not a function

赞(0）回复(0）举报 4个月前

wlsrxk515#

在自定义组件中在包一层就可以了

<view class="target">
</view>

 <!--  变成这样 -->
<view class="wrapper">
  <view class="target">
  </view>
</view>

赞(0）回复(0）举报 4个月前

6tqwzwtp6#

这样写可以

import { onMounted, getCurrentInstance } from "vue";
import type { ComponentInternalInstance } from "vue";

const _this = getCurrentInstance() as ComponentInternalInstance;

const initCreateIntersectionObserver = () => {
  uni
    .createIntersectionObserver(_this)
    .relativeToViewport({ bottom: 0 })
    .observe(".target", (res) => {
      if (res.intersectionRatio) {
         // .....
      }
    });
};

onMounted(() => {
  initCreateIntersectionObserver();
});

赞(0）回复(0）举报 4个月前

我来回答

uni-app 在vue3中使用uni.createIntersectionObserver找不到dom节点的问题(实际有相关dom节点)

6条答案

相关问题

热门标签

最新问答