1
// 当前键盘的高度，界面中根据此状态，调整界面布局高度等
2
const [keyboardHeight, setKeyboardHeight] = useState<number>(0)
3
// 传递给 scrool-view 的 scrollTop。也可以直接获取 scrool-view 的实例，调用scrollTop函数
4
const [scrollTop, setScrollTop] = useState<number>(0)
5
const keyboardEvent = useCallback((height: number, index: number) => {
6
  const eventHeight = height
7
  if (eventHeight === 0) {
8
    return;
9
  }
10
  Taro.createSelectorQuery()
11
    // 底部的 tabbar
12
    .select(`#bottom-bar-wrapper`).boundingClientRect()
13
    // 滚动区域
14
    .select(`#scroll-wrapper-inner`).boundingClientRect()
15
    .select(`#scroll-wrapper-inner`).scrollOffset()
16
    // 当前输入框
17
    .select(`#row-${index}`).boundingClientRect()
18
    .exec((res) => {
19
      const [bottomBar, container, offset, row] = res as any[]
20
      const nextKeyboardHeight = eventHeight - bottomBar.height
21
      if (nextKeyboardHeight >= 0 && keyboardHeight !== nextKeyboardHeight) {
22
        setKeyboardHeight(nextKeyboardHeight)
23
      }
24

25
      if (!container || !row) {
26
        return
27
      }
28

29
      const visibleTop = container.top
30
      const visibleBottom = container.bottom - eventHeight - bottomBar.height
31
      const currentScrollTop = offset?.scrollTop || 0
32

33
      // 已完全可见则不滚动
34
      if (row.top >= visibleTop && row.bottom <= visibleBottom) {
35
        return
36
      }
37

38
      let delta = 0
39
      if (row.bottom > visibleBottom) {
40
        // 需要向下滚动
41
        delta = row.bottom - visibleBottom + 8
42
      } else if (row.top < visibleTop) {
43
        // 需要向上滚动
44
        delta = row.top - visibleTop - 8
45
      }
46

47
      if (delta !== 0) {
48
        const nextTop = Math.max(0, currentScrollTop + delta)
49
        setScrollTop(nextTop)
50
      }
51
    })
52

53
}, [])
54

55
// 注意：若导致键盘收起的操作不是来自输入框，则不会触发输入框的onKeyboardHeightChange 。所以需要监听全局的会调兜底
56
useEffect(() => {
57
  const func = ({ height }) => {
58
    if (height === 0) {
59
      setKeyboardHeight(0);
60
    }
61
  }
62
  Taro.onKeyboardHeightChange(func)
63
  return () => {
64
    Taro.offKeyboardHeightChange(func);
65
  }
66
}, [])