fix: taro h5 端滚动错乱修复

irisSong · irisSong · commit 56a2ed50a983 · 2025-04-29T12:26:00.000+08:00
diff --git a/src/packages/elevator/demos/taro/demo5.tsx b/src/packages/elevator/demos/taro/demo5.tsx
@@ -27,12 +27,20 @@ const Demo5 = () => {
       title: 'G',
       list: [
         {
-          name: '广西',
-          id: 3,
+          name: '甘肃',
+          id: 31,
         },
         {
           name: '广东',
-          id: 4,
+          id: 32,
+        },
+        {
+          name: '广东',
+          id: 33,
+        },
+        {
+          name: '贵州',
+          id: 34,
         },
       ],
     },
@@ -41,15 +49,44 @@ const Demo5 = () => {
       list: [
         {
           name: '湖南',
-          id: 5,
+          id: 41,
+        },
+        {
+          name: '湖北',
+          id: 42,
         },
         {
           name: '湖北',
-          id: 6,
+          id: 43,
+        },
+        {
+          name: '湖南',
+          id: 44,
+        },
+        {
+          name: '海南',
+          id: 45,
+        },
+      ],
+    },
+    {
+      title: 'S',
+      list: [
+        {
+          name: '山东',
+          id: 51,
+        },
+        {
+          name: '山西',
+          id: 52,
+        },
+        {
+          name: '上海',
+          id: 53,
         },
         {
-          name: '河南',
-          id: 7,
+          name: '陕西',
+          id: 54,
         },
       ],
     },
diff --git a/src/packages/elevator/doc.en-US.md b/src/packages/elevator/doc.en-US.md
@@ -61,8 +61,7 @@ import { Elevator } from '@nutui/nutui-react'
 | list | Index list | `Array（item needs to contain id and name attributes, and name supports passing in html structure）` | `[{id: 0, name: ''}]` |
 | sticky | Whether the index is ceiling | `boolean` | `false` |
 | showKeys | Show right navigation | `boolean` | `true` |
-| spaceHeight | Up and down spacing of right anchor point | `number` | `23` |
-| titleHeight | Height of left index | `number` | `35` |
+| spaceHeight | Up and down spacing of right anchor point | `number` | `18` |
 | onItemClick | Click content | `onItemClick:(key: string, item: { id: number, name: string })=>void` | `false` |
 | onIndexClick | Click index | `onIndexClick:(key: string)=>void` | `false` |
 
diff --git a/src/packages/elevator/doc.md b/src/packages/elevator/doc.md
@@ -61,8 +61,7 @@ import { Elevator } from '@nutui/nutui-react'
 | list | 索引列表 | `Array（item 需包含 id、name 属性, name 支持传入 html 结构）` | `[{id: 0, name: ''}]` |
 | sticky | 索引是否吸顶 | `boolean` | `false` |
 | showKeys | 展示右侧导航 | `boolean` | `true` |
-| spaceHeight | 右侧锚点的上下间距 | `number` | `23` |
-| titleHeight | 左侧索引的高度 | `number` | `35` |
+| spaceHeight | 右侧锚点的上下间距 | `number` | `18` |
 | onItemClick | 点击内容 | `onItemClick:(key: string, item: { id: number, name: string })=>void` | `false` |
 | onIndexClick | 点击索引 | `onIndexClick:(key: string)=>void` | `false` |
 
diff --git a/src/packages/elevator/doc.taro.md b/src/packages/elevator/doc.taro.md
@@ -61,8 +61,7 @@ import { Elevator } from '@nutui/nutui-react-taro'
 | list | 索引列表 | `Array（item 需包含 id、name 属性, name 支持传入 html 结构）` | `[{id: 0, name: ''}]` |
 | sticky | 索引是否吸顶 | `boolean` | `false` |
 | showKeys | 展示右侧导航 | `boolean` | `true` |
-| spaceHeight | 右侧锚点的上下间距 | `number` | `23` |
-| titleHeight | 左侧索引的高度 | `number` | `35` |
+| spaceHeight | 右侧锚点的上下间距 | `number` | `18` |
 | onItemClick | 点击内容 | `onItemClick:(key: string, item: { id: number, name: string })=>void` | `false` |
 | onIndexClick | 点击索引 | `onIndexClick:(key: string)=>void` | `false` |
 
diff --git a/src/packages/elevator/doc.zh-TW.md b/src/packages/elevator/doc.zh-TW.md
@@ -61,8 +61,7 @@ import { Elevator } from '@nutui/nutui-react'
 | list | 索引列表 | `Array（item 需包含 id、name 屬性, name 支持傳入 html 結構）` | `[{id: 0, name: ''}]` |
 | sticky | 索引是否吸頂 | `boolean` | `false` |
 | showKeys | 展示右側導航 | `boolean` | `true` |
-| spaceHeight | 右側錨點的上下間距 | `number` | `23` |
-| titleHeight | 左側索引的高度 | `number` | `35` |
+| spaceHeight | 右側錨點的上下間距 | `number` | `18` |
 | onItemClick | 點擊內容 | `onItemClick:(key: string, item: { id: number, name: string })=>void` | `false` |
 | onIndexClick | 點擊索引 | `onIndexClick:(key: string)=>void` | `false` |
 
diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss
@@ -88,7 +88,6 @@
     position: absolute;
     right: $elevator-bars-right;
     top: $elevator-bars-top;
-    font-size: $elevator-bars-font-size;
     transform: $elevator-bars-transform;
     z-index: $elevator-bars-z-index;
 
@@ -104,6 +103,7 @@
         border-radius: 50%;
         margin: 1px 0;
         color: $elevator-bars-color;
+        font-size: $elevator-bars-font-size;
         cursor: pointer;
         &-active {
           font-weight: $font-weight-bold;
diff --git a/src/packages/elevator/elevator.taro.tsx b/src/packages/elevator/elevator.taro.tsx
@@ -12,6 +12,7 @@ import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { harmony } from '@/utils/taro/platform'
 import { useUuid } from '@/hooks/use-uuid'
+import raf from '@/utils/raf'
 
 export const elevatorContext = createContext({} as ElevatorData)
 
@@ -22,7 +23,6 @@ export interface ElevatorProps extends BasicComponent {
   list: any[]
   sticky: boolean
   spaceHeight: number
-  titleHeight: number
   showKeys: boolean
   onItemClick: (key: string, item: ElevatorData) => void
   onIndexClick: (key: string) => void
@@ -34,10 +34,8 @@ const defaultProps = {
   floorKey: 'title',
   list: [] as any[],
   sticky: false,
-  spaceHeight: 23,
-  titleHeight: 35,
+  spaceHeight: 18,
   showKeys: true,
-  className: 'weapp-elevator',
 } as ElevatorProps
 interface ElevatorData {
   name: string
@@ -54,7 +52,6 @@ export const Elevator: FunctionComponent<
     list,
     sticky,
     spaceHeight,
-    titleHeight,
     showKeys,
     className,
     style,
@@ -68,11 +65,10 @@ export const Elevator: FunctionComponent<
   }
   const uuid = useUuid()
   const classPrefix = 'nut-elevator'
-  const listview = useRef<HTMLDivElement>(null)
+
   const initData = {
     anchorIndex: 0,
     listHeight: [] as number[],
-    listGroup: [] as any[],
     scrollY: 0,
   }
   const touchState = useRef({
@@ -102,29 +98,35 @@ export const Elevator: FunctionComponent<
   }
 
   const calculateHeight = () => {
-    let height = 0
+    state.current.listHeight = [0]
 
-    state.current.listHeight.push(height)
-    for (let i = 0; i < state.current.listGroup.length; i++) {
-      const query = createSelectorQuery()
-      query
-        .selectAll(`.${classPrefix}-${uuid} .nut-elevator-item-${i}`)
-        .boundingClientRect()
-      // eslint-disable-next-line no-loop-func
-      query.exec((res: any) => {
-        if (res[0][0]) height += res[0][0].height
-        state.current.listHeight.push(height)
+    const query = createSelectorQuery()
+    query
+      .selectAll(`#${classPrefix}-${uuid} .${classPrefix}-list-item`)
+      .boundingClientRect()
+      .exec((rect = []) => {
+        if (rect[0] && rect[0].length) {
+          // rect[0] = rect[0].reverse()
+          state.current.listHeight = rect[0].reduce(
+            (acc: any[], item: { height: any }, index: number) => {
+              // 当前项的高度等于前面所有项的高度之和
+              const height = acc[index] + item.height
+              acc.push(height)
+              return acc
+            },
+            [0]
+          )
+        }
       })
-    }
   }
 
-  const scrollTo = (index: number) => {
+  const scrollTo = async (index: number) => {
     if (!index && index !== 0) {
       return
     }
 
     if (!state.current.listHeight.length) {
-      calculateHeight()
+      await calculateHeight()
     }
     let cacheIndex = index
     if (index < 0) {
@@ -138,7 +140,7 @@ export const Elevator: FunctionComponent<
     setCodeIndex(cacheIndex)
     const scrollTop = state.current.listHeight[cacheIndex]
     setScrollTop(scrollTop)
-    if (sticky && scrollY !== scrollTop) {
+    if (mode === 'vertical' && sticky) {
       setScrollY(Math.floor(scrollTop) > 0 ? 1 : 0)
     }
   }
@@ -178,38 +180,31 @@ export const Elevator: FunctionComponent<
     onIndexClick && onIndexClick(key)
   }
 
-  const setListGroup = () => {
-    if (listview.current) {
-      createSelectorQuery()
-        .selectAll(`.${classPrefix}-${uuid} .nut-elevator-list-item`)
-        .node((el) => {
-          state.current.listGroup = [...Object.keys(el)]
-          calculateHeight()
-        })
-        .exec()
-    }
-  }
-
   const listViewScroll = (e: any) => {
-    const { listHeight } = state.current
-    if (!listHeight.length) {
-      calculateHeight()
-    }
-    const target = e.target as Element
-    const { scrollTop } = target
-    state.current.scrollY = Math.floor(scrollTop)
-    Taro.getEnv() === 'WEB' && setScrollTop(scrollTop)
-    if (sticky && scrollTop !== scrollY) {
-      setScrollY(Math.floor(scrollTop) > 0 ? 1 : 0)
-    }
-    if (scrolling.current) return
-    for (let i = 0; i < listHeight.length - 1; i++) {
-      const height1 = listHeight[i]
-      const height2 = listHeight[i + 1]
-      if (state.current.scrollY >= height1 && state.current.scrollY < height2) {
-        return setCodeIndex(i)
+    raf(() => {
+      const { listHeight } = state.current
+      if (!listHeight.length) {
+        calculateHeight()
       }
-    }
+      const target = e.target as Element
+      const { scrollTop } = target
+      state.current.scrollY = Math.floor(scrollTop)
+      Taro.getEnv() === 'WEB' && setScrollTop(scrollTop)
+      if (mode === 'vertical' && sticky) {
+        setScrollY(Math.floor(scrollTop) > 0 ? 1 : 0)
+      }
+      if (scrolling.current) return
+
+      const index = listHeight.findIndex(
+        (height, i) =>
+          state.current.scrollY >= height &&
+          state.current.scrollY < (listHeight[i + 1] || Infinity)
+      )
+
+      if (index !== -1 && index !== codeIndex) {
+        setCodeIndex(index)
+      }
+    })
   }
 
   const getWrapStyle = useMemo(() => {
@@ -219,28 +214,26 @@ export const Elevator: FunctionComponent<
   }, [height])
 
   useEffect(() => {
-    if (listview.current) {
-      nextTick(() => {
-        setListGroup()
-      })
-    }
-  }, [listview])
+    nextTick(() => {
+      calculateHeight()
+    })
+  }, [])
 
   return (
     <div
-      className={`${classPrefix} ${className} ${classPrefix}-${mode} ${classPrefix}-${uuid}`}
+      className={`${classPrefix} ${className} ${classPrefix}-${mode} `}
+      id={`${classPrefix}-${uuid}`}
       style={style}
       {...rest}
     >
       <View className={`${classPrefix}-list`} style={getWrapStyle}>
         <ScrollView
           scrollTop={scrollTop}
           scrollY
-          scrollWithAnimation
+          enhanced
+          scrollWithAnimation={false}
           scrollAnchoring
           className={`${classPrefix}-list-inner`}
-          type="list"
-          ref={listview}
           onScroll={listViewScroll}
           onTouchStart={(e) => {
             scrolling.current = false
diff --git a/src/packages/elevator/elevator.tsx b/src/packages/elevator/elevator.tsx
@@ -19,7 +19,6 @@ export interface ElevatorProps extends BasicComponent {
   list: any[]
   sticky: boolean
   spaceHeight: number
-  titleHeight: number
   showKeys: boolean
   onItemClick: (key: string, item: ElevatorData) => void
   onIndexClick: (key: string) => void
@@ -31,8 +30,7 @@ const defaultProps = {
   floorKey: 'title',
   list: [] as any[],
   sticky: false,
-  spaceHeight: 23,
-  titleHeight: 35,
+  spaceHeight: 18,
   showKeys: true,
 } as ElevatorProps
 interface ElevatorData {
@@ -50,7 +48,6 @@ export const Elevator: FunctionComponent<
     list,
     sticky,
     spaceHeight,
-    titleHeight,
     showKeys,
     className,
     style,
