fix(elevator): harmony适配 (#2836)

* fix: 解决微信小程序滚动报错问题 * fix(elevator): harmony适配 * fix: harmony height
jdf2e · Dec 12, 2024 · fe50c4b · fe50c4b
1 parent 3bfa151
commit fe50c4b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss
@@ -51,20 +51,23 @@
     }
 
     &-fixed {
+      display: flex;
+      align-items: center;
       width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       z-index: 1;
       padding: $elevator-list-item-padding;
       height: $elevator-list-item-code-height;
-      line-height: $elevator-list-item-code-line-height;
-      font-size: $elevator-list-item-code-font-size;
-      color: $elevator-list-fixed-color;
-      font-weight: $elevator-list-item-code-font-weight;
       background-color: $elevator-list-fixed-bg-color;
       box-sizing: border-box;
       box-shadow: $elevator-list-fixed-box-shadow;
+      &-title {
+        font-size: $elevator-list-item-code-font-size;
+        color: $elevator-list-fixed-color;
+        font-weight: $elevator-list-item-code-font-weight;
+      }
     }
   }
 

diff --git a/src/packages/elevator/elevator.taro.tsx b/src/packages/elevator/elevator.taro.tsx
@@ -1,15 +1,16 @@
 import React, {
-  createContext,
   FunctionComponent,
   useEffect,
   useRef,
   useState,
+  createContext,
+  useMemo,
 } from 'react'
-import Taro, { createSelectorQuery, nextTick } from '@tarojs/taro'
-
-import { ScrollView, View } from '@tarojs/components'
+import Taro, { nextTick, createSelectorQuery } from '@tarojs/taro'
+import { ScrollView, View, Text } from '@tarojs/components'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
+import { harmony } from '@/utils/platform-taro'
 import useUuid from '@/utils/use-uuid'
 
 export const elevatorContext = createContext({} as ElevatorData)
@@ -148,8 +149,7 @@ export const Elevator: FunctionComponent<
     touchState.current.y2 = firstTouch.pageY
     const delta =
       (touchState.current.y2 - touchState.current.y1) / spaceHeight || 0
-    const cacheIndex = state.current.anchorIndex + Math.floor(delta)
-
+    const cacheIndex = state.current.anchorIndex + Math.round(delta)
     setCodeIndex(cacheIndex)
     scrollTo(cacheIndex)
   }
@@ -213,6 +213,12 @@ export const Elevator: FunctionComponent<
     }
   }
 
+  const getWrapStyle = useMemo(() => {
+    const calcHeight = Number.isNaN(+height) ? height : `${height}px`
+
+    return { height: harmony() ? Number(height) : calcHeight }
+  }, [height])
+
   useEffect(() => {
     if (listview.current) {
       nextTick(() => {
@@ -227,10 +233,7 @@ export const Elevator: FunctionComponent<
       style={style}
       {...rest}
     >
-      <View
-        className={`${classPrefix}-list`}
-        style={{ height: Number.isNaN(+height) ? height : `${height}px` }}
-      >
+      <View className={`${classPrefix}-list`} style={getWrapStyle}>
         <ScrollView
           scrollTop={scrollTop}
           scrollY
@@ -297,13 +300,7 @@ export const Elevator: FunctionComponent<
             </View>
           ) : null}
           <View className={`${classPrefix}-bars`}>
-            <View
-              className={`${classPrefix}-bars-inner`}
-              onTouchStart={(event) => touchStart(event as any)}
-              onTouchMove={(event) => touchMove(event as any)}
-              onTouchEnd={touchEnd}
-              style={{ touchAction: 'pan-y' }}
-            >
+            <View className={`${classPrefix}-bars-inner`}>
               {list.map((item: any, index: number) => {
                 return (
                   <View
@@ -315,6 +312,10 @@ export const Elevator: FunctionComponent<
                     data-index={index}
                     key={index}
                     onClick={() => handleClickIndex(item[floorKey])}
+                    onTouchStart={(event) => touchStart(event as any)}
+                    onTouchMove={(event) => touchMove(event as any)}
+                    onTouchEnd={touchEnd}
+                    style={{ touchAction: 'pan-y' }}
                   >
                     {item[floorKey]}
                   </View>
@@ -326,9 +327,9 @@ export const Elevator: FunctionComponent<
       ) : null}
       {sticky && scrollY > 0 ? (
         <View className={`${classPrefix}-list-fixed`}>
-          <span className={`${classPrefix}-list-fixed-title`}>
+          <Text className={`${classPrefix}-list-fixed-title`}>
             {list[codeIndex][floorKey]}
-          </span>
+          </Text>
         </View>
       ) : null}
     </div>