diff --git a/src/packages/elevator/elevator.scss b/src/packages/elevator/elevator.scss index 24c4bf45f9..89136fa9d4 100644 --- a/src/packages/elevator/elevator.scss +++ b/src/packages/elevator/elevator.scss @@ -51,6 +51,8 @@ } &-fixed { + display: flex; + align-items: center; width: 100%; position: absolute; top: 0; @@ -58,13 +60,14 @@ 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 index a04a8f6bfa..ce97fa3872 100644 --- 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} > - + ) : null} - touchStart(event as any)} - onTouchMove={(event) => touchMove(event as any)} - onTouchEnd={touchEnd} - style={{ touchAction: 'pan-y' }} - > + {list.map((item: any, index: number) => { return ( handleClickIndex(item[floorKey])} + onTouchStart={(event) => touchStart(event as any)} + onTouchMove={(event) => touchMove(event as any)} + onTouchEnd={touchEnd} + style={{ touchAction: 'pan-y' }} > {item[floorKey]} @@ -326,9 +327,9 @@ export const Elevator: FunctionComponent< ) : null} {sticky && scrollY > 0 ? ( - + {list[codeIndex][floorKey]} - + ) : null}