taro/src/components/input/SlidngScale.tsx

import { ScrollView, View, Text, Image } from "@tarojs/components";
import './SlidngScale.scss'
import { useEffect, useRef, useState } from "react";
import Taro from "@tarojs/taro";

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;
    const maxNum: number = props.max;
    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 - props.min) * slidngWidth / props.step + 1);
    for (var i: number = props.min; i <= props.max; 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(() => {
        // var  aa = current-props.min;
        // var bb = aa/props.step*slidngWidth;
        // setLeft(bb/ratio)
    }, [])

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


    const handleScroll = (e) => {
        const { scrollLeft } = e.detail;

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

        if ((strValue as any) > props.max) {
            strValue = props.max as any;
        }

        if (parseFloat(strValue) != current) {
            var data = strValue as any;
            if (props.step < 1) {
                data = parseFloat(strValue).toFixed(1);
            }
            else {
                data = Math.round(data);
            }

            setCurrent(data);

            props.changed(data);
        }
    };

    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="top_line" style={{ backgroundColor: props.themeColor }} />
            <ScrollView ref={scrollViewRef} scrollX scrollLeft={left} className="scroll" onScroll={handleScroll}>
                <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 }} key={index}>
                                    {
                                        item.showBig ? <Text className="slidng_text">{item.value}</Text> : null
                                    }
                                </View>
                            })
                        }
                    </View>
                    {/* <View className="demo2"/> */}
                    <View className="scrollPadding" />
                </View>

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


    </View>
}