UseInView

import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';

const useIsInView = (selector, options = { initialRatio: 1, thresholds: [0, 1], observeAll: true }): [React.SetStateAction<boolean>] => {
    const [isInView, setIsInView] = useState(true);
    const [intersectionRatio, setIntersectionRatio] = useState(0);
    const [page, _] = useState<any>(Taro.getCurrentInstance().page);
    const [random, __] = useState(Math.random());
    useEffect(() => {
        if (intersectionRatio > 0.5) {
            setIsInView(true);
        } else {
            setIsInView(false);
        }
    }, [intersectionRatio])

    useEffect(() => {
        console.log('inView inner effect', selector, random);

        const observer = Taro.createIntersectionObserver(page, options);
        const vp = observer.relativeToViewport({ bottom: 200 })
        vp.observe('.' + selector, (res) => {
            console.log('inView inner change', res);
            setIntersectionRatio(res.intersectionRatio);
        });
        return () => {
            observer.disconnect();
        };
    }, [options]);

    return [isInView];
};

export default useIsInView;

使用方法

定义 key及 hook

  const key = "component_key";
  // 定义
  const [inView] = useInView(key);

创建 component

    return <View id={key} key={key}></View>

监听变化

    useEffect(() => {
        console.log("Is In View Change", inView)
    },[inView)
最后修改：2023 年 11 月 01 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏