自定义hook之监听dom滚动悬浮状态hooks_dom类hooks

本例子实现了自定义hook之监听dom滚动悬浮状态hooks，具体代码如下

import { usePageScroll } from '@tarojs/taro';
import { useCallback, useEffect, useState } from 'react';
import { NodesRef, useDidShow } from '@tarojs/taro';
import { useSelectorQuery } from 'taro-hooks';
/**
 * 获取指定dom 的 `rect` 对象
 * @param id
 * @returns
 */
const useQueryRect = (
  id: string,
): [rect: NodesRef.BoundingClientRectCallbackResult | undefined, flush: () => void] => {
  const [query] = useSelectorQuery();
  const [rect, setRect] = useState<NodesRef.BoundingClientRectCallbackResult>();

  const flush = useCallback(() => {
    query
      .select(id.startsWith('#') ? id : `#${id}`)
      .boundingClientRect((respRect) => {
        setRect(respRect);
      })
      .exec();
  }, [id, query]);

  useDidShow(() => {
    flush();
  });

  useEffect(() => {
    if (!rect) {
      query
        .select(id.startsWith('#') ? id : `#${id}`)
        .boundingClientRect((respRect) => {
          setRect(respRect);
        })
        .exec();
    }
  }, [id, query, rect]);

  return [rect, flush];
};


/**
 * @description 监听dom滚动悬浮状态
 * @description navBar 悬浮状态
 * @param id 需要监听的domId eg: 'navbar' | '#navbar'
 */
const useDomFixed = (id: string): [fixed: boolean] => {
  const [rect] = useQueryRect(id);
  const [fixed, setFixed] = useState(false);

  usePageScroll((pageRes) => {
    const pageScrollTop = pageRes.scrollTop;
    if (rect && pageScrollTop >= rect?.top) {
      !fixed && setFixed(true);
    } else {
      fixed && setFixed(false);
    }
  });

  return [fixed];
};

export default useDomFixed;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65