基于taro组件scrollView实现pickview

最新推荐文章于 2024-05-15 09:38:03 发布

凯子哥么么哒

最新推荐文章于 2024-05-15 09:38:03 发布

阅读量419

点赞数

分类专栏： taro 文章标签： taro react.js javascript

本文链接：https://blog.csdn.net/qq_31695715/article/details/126857234

版权

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){
        setScroll