菜鸡
菜鸡
  • 发布:2022-11-23 18:26
  • 更新:2022-11-23 18:26
  • 阅读:507

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

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

浏览器平台: Edge

浏览器版本: 107.0.1418.52 (正式版本) (64 位)

项目创建方式: CLI

CLI版本号: 暂无

App下载地址或H5⽹址: https://github.com/643104191/uni-app-vue3-bug

示例代码:
<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>  

操作步骤:

系统信息:

  • 发行平台: 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.createIntersectionObserver正常执行

实际结果:

uni.createIntersectionObserver执行不正常,提示找不到对应的dom
image

bug描述:

使用uni.createIntersectionObserver提示找不到dom,实际有dom

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

2022-11-23 18:26 负责人:无 分享
已邀请:

要回复问题请先登录注册