taro/src/components/input/SlidngScale.tsx

import { ScrollView, View, Text, Image } from "@tarojs/components";
import VirtualList from '@tarojs/components/virtual-list';
import './SlidngScale.scss'
import { useEffect, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import { rpxToPx } from "@/utils/tools";
import { throttle } from 'lodash';

var timerA = null
export default function Component(props: {
    step: number, min: number,
    max: number, default_value: number, changed: Function, unit: string
    themeColor: string
}) {
    const scrollViewRef = useRef<any>();
    const minNum: number = props.min;//props.step < 1 ?props.default_value-2:props.default_value-20//
    const maxNum: number = props.max;//props.step < 1 ?props.default_value+2:props.default_value+20//

    const [timer, setTimer] = useState(null)
    const [leftData, setLeftData] = useState(0)
    const stepNum: number = props.step * 10;
    const jingdu: number = props.step < 1 ? 10 : 1;
    const list: any[] = [];

    const slidngWidth = 10

    const [current, setCurrent] = useState(props.default_value)
    const [left, setLeft] = useState((props.default_value - minNum) * slidngWidth / props.step + 1);
    const [isDraging, setIsDraging] = useState(false)
    const [timeoutId, setTimeoutId] = useState(null);

    // const [showScrollView, setShowScrollView] = useState(false)

    for (var i: number = minNum; i <= maxNum; i += props.step) {
        var value: number = parseFloat(i.toFixed(1));
        var isBig: boolean = Math.round((value - minNum) * jingdu) % Math.round(stepNum * jingdu) == 0;
        var isMiddle: boolean = (Math.round((value - minNum) * jingdu) * 2) % Math.round(stepNum * jingdu) == 0;

        list.push({
            value: props.step < 1 ? value : Math.round(value),
            showBig: isBig && i >= minNum && i <= maxNum,
            showMiddle: isMiddle && !isBig && i >= minNum && i <= maxNum
        })

    }

    // useEffect(() => {
    //     setTimeout(() => {
    //         setShowScrollView(true)
    //     }, 200)
    // }, [])

    // const dpr = Taro.pxTransform//Taro.getSystemInfoSync().pixelRatio; 

    useEffect(() => {
        let timeoutId;


    }, [])

    function scrollContent(e) {
        if (timerA)
            clearTimeout(timerA);

        timerA = setTimeout(() => {
            update(e)
        }, 90) as any
    }

    const handleScroll = throttle((e) => {

        console.log(e)
        if (timer) {
            clearTimeout(timer)
            setTimer(null)
        }

        if (leftData != e.detail && !isDraging) {
            setLeftData(e.detail)
            var timer2 = setTimeout(() => {
                console.log('aaa')
                update(e)
            }, 90)
            setTimer(timer2 as any)
        }



    },200);

    function dragStart(e) {
        setIsDraging(true)
    }

    function dragEnd(e) {
        setIsDraging(false)
    }

    function update(e) {
        const { scrollLeft } = e.detail;

        var count = scrollLeft / slidngWidth;
        var strValue = (minNum + Math.round(count) * props.step).toFixed(1);
        if ((strValue as any) < minNum) {
            strValue = minNum as any;
        }

        if ((strValue as any) > maxNum) {
            strValue = maxNum as any;
        }

        if (parseFloat(strValue) != current) {
            var data = strValue as any;
            if (props.step < 1) {
                data = parseFloat(strValue).toFixed(1);
                if (data.indexOf('.') > 0) {
                    const regexp = /(?:\.0*|(\.\d+?)0+)$/
                    data = data.replace(regexp, '$1')
                }
            }
            else {
                data = Math.round(data);
            }



            setCurrent(data);
            props.changed(data);
        }
    }

    const scrollEnd = (e) => {
        console.log(e, 'end')
        // const { scrollLeft } = e.detail;
        // setLeft(scrollLeft)
    }

    function itemContent(data) {
        var item = list[data.index]
        var index = data.index
        return <View className={item.showBig ? 'slidng_item_big' : item.showMiddle ? 'slidng_item_middle' : 'slidng_item'} style={{ width: 2, marginRight: 8, backgroundColor: props.themeColor, zIndex: 0 }} key={index}>
            {
                item.showBig ? <Text className="slidng_text">{item.value}</Text> : null
            }
        </View>
    }

    return <View className="slidng">
        <View className="number_bg">
            <Text className="number">{current}</Text>
            <Text className="unit">{props.unit}</Text>
        </View>

        <View className="scroll_bg">
            <View className="shadow_top" />
            <View className="shadow_left" />
            <View className="shadow_right" />
            <View className="top_line" style={{ backgroundColor: props.themeColor }} />
            <ScrollView
                style={{ zIndex: 0, position: 'relative' }} ref={scrollViewRef}
                scrollX scrollLeft={left} className="scroll"
                enablePassive={true}
                fastDeceleration={true}
                onScrollEnd={scrollEnd}
                onDragEnd={dragEnd}
                onDragStart={dragStart}
                onScroll={handleScroll}
                enhanced
            >
                <View className="scrollContent">
                    <View className="scrollPadding" />
                    <View className="content">
                        {
                            list.map((item, index) => {
                                return <View className={item.showBig ? 'slidng_item_big' : item.showMiddle ? 'slidng_item_middle' : 'slidng_item'}
                                    style={{ width: 2, marginRight: 8, backgroundColor: props.themeColor, zIndex: 0 }} key={index}>
                                    {
                                        item.showBig ? <Text className="slidng_text">{item.value}</Text> : null
                                    }
                                </View>
                            })
                        }
                        {/* <View style={{position:'fixed',right:0,top:0,width:100,bottom:0,backgroundColor:'red',zIndex:10}}/> */}
                    </View>
                    <View className="scrollPadding" />

                </View>

            </ScrollView>

            {/* <VirtualList height={rpxToPx(300)} width={rpxToPx(750)} onScroll={handleScroll} layout="horizontal"
                initialScrollOffset={left}
                itemCount={list.length}
                item={itemContent}
                itemSize={10}
                itemData={list}
            /> */}

            <Image className="center_line" src={require('@assets/images/scale_center.png')} />
            {/* <View className="center_line" /> */}
        </View>


    </View>
}