相关平台

微信小程序

小程序基础库: 2.23.4
使用框架: React

复现步骤

import React, { Component } from "react";
import { View, Canvas } from "@tarojs/components";
import Taro from "@tarojs/taro";

export default class Index extends Component {
  current = Taro.getCurrentInstance();
  onReady() {
    console.log("didMount", this.current);
    // @ts-ignore
    const io = Taro.createIntersectionObserver(this.current.page);
    console.log("io 实例:", io);
    io.relativeToViewport().observe(".circle-container", (res) => {
      console.log("res:", res);
    });
  }

  render() {
    return (
      <View className="index">
        <View>👇👇👇 向下滚动 👇👇👇👇</View>
        <View>👇👇👇 向下滚动 👇👇👇👇</View>
        <View>👇👇👇 向下滚动 👇👇👇👇</View>
        <View
          onClick={() => {
            // @ts-ignore
            Taro.showToast({
              title: "aaaa",
            });
          }}
          className="circle-container"
          style={{
            height: "100rpx",
            backgroundColor: "green",
            marginTop: "2000rpx",
            marginBottom: "100rpx",
            color: "#fff",
          }}
        >
          我的出现有触发 callback 吗?
        </View>
      </View>
    );
  }
}

期望结果

期望每次都应该找到 node .circle-container

实际结果

有时候找到的到，有时候找不到。

环境信息

👽 Taro v3.4.4

validFiles []

  Taro CLI 3.4.4 environment info:
    System:
      OS: macOS 11.6.4
      Shell: 5.8.1 - /usr/local/bin/zsh
    Binaries:
      Node: 14.17.0 - /usr/local/bin/node
      Yarn: 1.22.17 - /usr/local/bin/yarn
      npm: 8.5.2 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.4.4 => 3.4.4
      @tarojs/mini-runner: 3.4.4 => 3.4.4
      @tarojs/plugin-framework-react: 3.4.4 => 3.4.4
      @tarojs/react: 3.4.4 => 3.4.4
      @tarojs/runtime: 3.4.4 => 3.4.4
      @tarojs/taro: 3.4.4 => 3.4.4
      @tarojs/webpack-runner: 3.4.4 => 3.4.4
      babel-preset-taro: 3.4.4 => 3.4.4
      eslint-config-taro: 3.4.4 => 3.4.4
      react: ^17.0.0 => 17.0.2
      taro-ui: ^3.1.0-beta.2 => 3.1.0-beta.2
    npmGlobalPackages:
      typescript: 4.6.3