基于taro组件scrollView实现pickview

import { useEffect,useState } from "react";
import { View, Image, Text,ScrollView } from '@tarojs/components'
 
 
import './index.less'
 
let timeOut:any = null
let touch = false
let value = {}
let length = 0
const Index = (props) => {
  const [scrollTop, setScrollTop] = useState(0)
  const [data, setData] = useState(['aZA0001 未来科技城店','bZA0001 未来科技城店','cZA0001 未来科技城店','dHZA0001 未来科技城店','eHZA0001 未来科技城店','fHZA0001 未来科技城店','gHZA0001 未来科技城店','hHZA0001 未来科技城店','iHZA0001 未来科技城店','jHZA0001 未来科技城店','kHZA0001 未来科技城店','lHZA0001 未来科技城店'])
 
 
  useEffect(() => {
    length = props.pickerData
  }, [])
  const onScroll = (e) => {
    if(e.detail.scrollTop<0){
      setScrollTop(0)
      return
    }
    if(e.detail.scrollTop>40 * (length - 1)){
      setScrollTop(40 * (length - 1))
      return
    }
    setScrollTop(e.detail.scrollTop)
    if(!touch) {
      clearTimeout(timeOut)
      timeOut = setTimeout(() => {
        setScroll()
      },100)
    }
  }
 
  const handleTouchStart = () => {
    touch = true   
  }
 
  const handleTouchEnd = () => {
    setScroll()
    touch = false   
  }
 
  const setScroll = () => {
      if(scrollTop < 0){
        setScrollTop(0)
        return
      }
      if(scrollTop > 40 * (length - 1)){
        setScrollTop(40 * (length - 1))
        return
      }
      if(scrollTop%40>20){
        setScrollTop(scrollTop-(scrollTop%40)+40)
      }else{
        setScrollTop(scrollTop-(scrollTop%40))
      }
  }
 
  return (
    <View 
      className='Picker'
    >
      <View className='Picker-button'  onClick={() => {props.onClose()}}>
        <Image src={require('@/assets/img/down.png')} className='Picker-button-img'></Image>
      </View>
      <View className='Picker-title flex-between'>
        <View className='Picker-title-button'>
          <Text className='Picker-title-button-text' onClick={() => {props.onClose()}}>取消</Text>
        </View>
        <Text className='Picker-title-text'>请选择{props.title}</Text>
        <View className='Picker-title-button'>
          <Text className='Picker-title-button-text Picker-title-button-affirm' onClick={() => { props.onChange(value) }}>确认</Text>
        </View>
      </View>
      <View className='Picker-content' 
        style={{
          height: process.env.TARO_ENV === 'rn' ? 200 : '200px'
        }}
      >
        <ScrollView scrollTop={scrollTop} scrollY className='Picker-content' onScroll={(e)=>{onScroll(e)}} onTouchEnd={() => handleTouchEnd()} onTouchStart={(e) => handleTouchStart()}
          style={{
            height: process.env.TARO_ENV === 'rn' ? 200 : '200px'
          }}
        >
          <View
            style={{
              height: process.env.TARO_ENV === 'rn' ? 80 : '80px'
            }}
          ></View>
          {
            props.pickerData.map((item, index) => {
              if(scrollTop === index*40){
                value = item
              }
              return(
                <View className='Picker-content-item' 
                  style={{
                    height: process.env.TARO_ENV === 'rn' ? 40 : '40px',
                  }}
                  key={index}
                >
                {
                  props.noValue ? 
                  <Text className='Picker-content-item-text'
                    style={{
                      color: scrollTop === index*40? '#333333':'#9B9B9B'
                    }}
                  >{`${item.label}`}</Text>
                  :
                  <Text className='Picker-content-item-text'
                    style={{
                      color: scrollTop === index*40? '#333333':'#9B9B9B',
                    }}
                  >{`${item.value} ${item.label}`}</Text>
                }
              </View>
              )
            })
          }
          <View
            style={{
                height: process.env.TARO_ENV === 'rn' ? 80 : '80px'
              }}
          ></View>
        </ScrollView>
        <View  className='Picker-center'
          style={{
            height: process.env.TARO_ENV === 'rn' ? 40 : '40px',
            position: 'absolute',
            top: process.env.TARO_ENV === 'rn' ? 80 : '80px',
            backgroundColor:'#F9F9F9',
            zIndex: -1
          }}
        ></View>
      </View>
    </View>
  )
}
 
export default Index;