uni-app createIntersectionObserver函数与page-meta冲突

发布于 1周前 作者 itying888 来自 Uni-App

uni-app createIntersectionObserver函数与page-meta冲突

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 23H2(22631.4317)
HBuilderX类型 Alpha
HBuilderX版本号 4.32
浏览器平台 Edge
浏览器版本 130.0.2849.68
项目创建方式 HBuilderX

示例代码：

import { onMounted, getCurrentInstance } from 'vue'

const instanceContext = getCurrentInstance()
onMounted(() => {
uni.createIntersectionObserver().relativeTo('.app', {}).observe(".target", (res) => {
console.log('call')
});
})

<template>
<page-meta></page-meta>
<view class="app">
<view class="target"></view>
</view>
</template>

操作步骤：

按照上述中的代码示例即可复现，用的是vue3

预期结果：

既可以使用page-meta也可以使用， uni.createIntersectionObserver()

实际结果：

import { onMounted, getCurrentInstance } from 'vue'

const instanceContext = getCurrentInstance()
onMounted(() => {
uni.createIntersectionObserver().relativeTo('.app', {}).observe(".target", (res) => {
console.log('call')
});
})

<template>
<page-meta></page-meta>
<view class="app">
<view class="target"></view>
</view>
</template>

bug描述：

page-meta标签必须是一个元素，并且不能存在嵌套元素。那么我的<view class="app"></view>只能写在page-meta的下面。此次使用uni.createIntersectionObserver()，控制台就会抛出错误：Uncaught TypeError: $el.querySelector is not a function。经过逆向发现，const $el = findElem(component)；查到的元素是page-meta。


Harmonyos Next教程
1 回复

在使用uni-app开发跨平台应用时，createIntersectionObserver函数和page-meta的配置确实可能产生一些冲突，尤其是在处理页面滚动和元素可见性检测时。以下是一个简化的代码案例，展示了如何在uni-app中正确使用createIntersectionObserver，同时避免与page-meta设置（如页面滚动）的冲突。

1. 使用createIntersectionObserver检测元素可见性

首先，我们在页面的onLoad或mounted生命周期中创建一个IntersectionObserver实例，用于检测某个元素的可见性变化。

export default {
  data() {
    return {
      observer: null,
      isVisible: false
    };
  },
  mounted() {
    this.createObserver();
  },
  methods: {
    createObserver() {
      this.observer = uni.createIntersectionObserver({
        selector: '#myElement', // 目标元素选择器
        data: (entries) => {
          const entry = entries[0];
          this.isVisible = entry.isIntersecting; // 更新元素可见性状态
          console.log(`Element is ${this.isVisible ? 'visible' : 'not visible'}`);
        }
      }).observe();
    },
    onDestroy() {
      if (this.observer) {
        this.observer.disconnect(); // 页面销毁时断开观察
      }
    }
  },
  beforeDestroy() {
    this.onDestroy();
  }
};

2. 配置page-meta以避免滚动冲突

为了确保createIntersectionObserver能够正常工作，我们需要确保页面的滚动设置不会干扰到观察者的行为。在page.json或页面的<page-meta>标签中，我们应避免设置可能影响滚动的属性，如scroll-y或scroll-with-animation，除非确实需要。

// page.json 中的页面配置示例
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false, // 禁用下拉刷新，避免干扰滚动
        "disableScroll": false // 根据需要设置滚动，false表示允许滚动
      }
    }
  ]
}

或者在页面的<template>中：

<page-meta :scroll-y="true"></page-meta> <!-- 明确设置滚动方向 -->

总结

通过上述代码和配置，我们可以在uni-app中有效地使用createIntersectionObserver来检测元素的可见性变化，同时避免与page-meta配置产生的冲突。关键在于确保页面的滚动设置不会干扰到IntersectionObserver的行为，以及在页面生命周期结束时正确断开观察者，以避免内存泄漏。

回到顶部