|
|
@@ -0,0 +1,343 @@
|
|
|
+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';
|
|
|
+// import { SvgXml } from "react-native-svg";
|
|
|
+
|
|
|
+var timerA = null
|
|
|
+var lastValue = 0
|
|
|
+
|
|
|
+let SvgXml;
|
|
|
+if (process.env.TARO_ENV == 'rn') {
|
|
|
+ SvgXml = require("react-native-svg").SvgXml
|
|
|
+}
|
|
|
+export default function Component(props: {
|
|
|
+ step: number, min: number,
|
|
|
+ max: number, default_value: number,
|
|
|
+ scale: number,
|
|
|
+ changed: Function, unit: string
|
|
|
+ themeColor: string,
|
|
|
+ updateStatus: Function
|
|
|
+}) {
|
|
|
+ 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 min = props.min//(props.default_value - props.step * 20) < props.min ? props.min : props.default_value - props.step * 20
|
|
|
+ const max = props.max//(props.default_value + props.step * 20) > props.max ? props.max : props.default_value + props.step * 20
|
|
|
+ // const [minNum, setMinNum] = useState(min)
|
|
|
+ // const [maxNum, setMaxNum] = useState(max)
|
|
|
+
|
|
|
+ const stepNum: number = props.step * 10;
|
|
|
+ const jingdu: number = props.step < 0.1 ? 100 : props.step < 1 ? 10 : 1;
|
|
|
+ const list: any[] = [];
|
|
|
+ // const [list, setList] = useState([])
|
|
|
+
|
|
|
+ const slidngWidth = 10
|
|
|
+
|
|
|
+ const [current, setCurrent] = useState(props.default_value)
|
|
|
+ const [left, setLeft] = useState((props.default_value - min) * slidngWidth / props.step - 0.5);
|
|
|
+ const [isDraging, setIsDraging] = useState(false)
|
|
|
+ const [isEnd, setIsEnd] = useState(true)
|
|
|
+ const [enableText, setEnableText] = useState(true)
|
|
|
+
|
|
|
+ for (var i: number = minNum; i <= maxNum; i += props.step) {
|
|
|
+ if (props.unit == 'in') {
|
|
|
+ var value: number = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
|
|
|
+ var isBig: boolean = i % 12 == 0;
|
|
|
+ var isMiddle: boolean = i % 6 == 0 && !isBig
|
|
|
+ list.push({
|
|
|
+ value: props.step < 1 ? value : Math.round(value),
|
|
|
+ showBig: isBig,
|
|
|
+ showMiddle: isMiddle
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var value: number = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // const [showScrollView, setShowScrollView] = useState(false)
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ debugger
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ if (isEnd && !isDraging) {
|
|
|
+ props.updateStatus(true)
|
|
|
+ setEnableText(true)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ props.updateStatus(false)
|
|
|
+ setEnableText(false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, [isEnd, isDraging])
|
|
|
+
|
|
|
+ function scrollContent(e) {
|
|
|
+ if (process.env.TARO_ENV == 'rn') {
|
|
|
+ update(e)
|
|
|
+ setIsDraging(false)
|
|
|
+ setIsEnd(true)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ lastValue = e.detail.scrollLeft;
|
|
|
+ if (timerA)
|
|
|
+ clearTimeout(timerA);
|
|
|
+
|
|
|
+ timerA = setTimeout(() => {
|
|
|
+
|
|
|
+ update(e)
|
|
|
+ setIsDraging(false)
|
|
|
+ }, 250) as any
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleScroll = throttle((e) => {
|
|
|
+
|
|
|
+ update(e)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }, 500);
|
|
|
+
|
|
|
+ function touchEnd() {
|
|
|
+ setIsEnd(true)
|
|
|
+ var temp = lastValue
|
|
|
+ setTimeout(() => {
|
|
|
+ if (temp == lastValue) {
|
|
|
+ setIsDraging(false)
|
|
|
+ }
|
|
|
+ }, 250)
|
|
|
+ }
|
|
|
+
|
|
|
+ function touchStart() {
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ props.updateStatus(false)
|
|
|
+ setEnableText(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function dragStart(e) {
|
|
|
+ lastValue = e.detail.scrollLeft;
|
|
|
+ setIsEnd(false)
|
|
|
+ setIsDraging(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function dragEnd(e) {
|
|
|
+ setIsEnd(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function update(e) {
|
|
|
+ const { scrollLeft } = e.detail;
|
|
|
+
|
|
|
+ var count = scrollLeft / slidngWidth;
|
|
|
+ var strValue = (minNum + Math.round(count) * props.step).toFixed(props.scale == 0 ? 1 : props.scale);
|
|
|
+ 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(props.scale == 0 ? 1 : props.scale);
|
|
|
+ if (data.indexOf('.') > 0) {
|
|
|
+ const regexp = /(?:\.0*|(\.\d+?)0+)$/
|
|
|
+ data = data.replace(regexp, '$1')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ data = Math.round(data);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (process.env.TARO_ENV == 'rn') {
|
|
|
+ const ReactNativeHapticFeedback = require("react-native-haptic-feedback")
|
|
|
+ // Optional configuration
|
|
|
+ const options = {
|
|
|
+ enableVibrateFallback: true,
|
|
|
+ ignoreAndroidSystemSettings: false,
|
|
|
+ };
|
|
|
+
|
|
|
+ // Trigger haptic feedback
|
|
|
+ ReactNativeHapticFeedback.trigger("impactLight", options);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ setCurrent(data);
|
|
|
+ props.changed(data);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const scrollEnd = (e) => {
|
|
|
+ }
|
|
|
+
|
|
|
+ function itemContent(data) {
|
|
|
+ var item = list[data.index]
|
|
|
+ var index = data.index
|
|
|
+ return <View style={{ width: 2, height: 100, backgroundColor: 'red', marginRight: 8 }}></View>
|
|
|
+ }
|
|
|
+
|
|
|
+ var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="${props.unit=='in'?120:100}" height="${rpxToPx(28)}">`;
|
|
|
+ var svgNumber = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8 + 60}" height="${rpxToPx(38)}">`;
|
|
|
+ if (props.unit=='in'){
|
|
|
+ for (var i = 0; i < 12; i++) {
|
|
|
+ var obj = list[i];
|
|
|
+ svgLine += `<line x1="${i * 12 + 1}" y1="0" x2="${i * 12 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}" stroke-width="2"/>`
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ for (var i = 0; i < 10; i++) {
|
|
|
+ var obj = list[i];
|
|
|
+ svgLine += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}" stroke-width="2"/>`
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ var obj = list[i];
|
|
|
+ if (obj.showBig) {
|
|
|
+ //字体设置参考 https://segmentfault.com/a/1190000006110417
|
|
|
+ svgNumber += `<text x="${i * 10 + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${obj.value}</text>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ svgLine += `</svg>`
|
|
|
+ svgNumber += `</svg>`
|
|
|
+
|
|
|
+ var basestr = encodeURIComponent(svgLine)
|
|
|
+ var imgLines = `url("data:image/svg+xml,${basestr}");`
|
|
|
+ var basestr2 = encodeURIComponent(svgNumber)
|
|
|
+ var imgNum = `url("data:image/svg+xml,${basestr2}");`
|
|
|
+
|
|
|
+ var svgLine2 = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">`
|
|
|
+ svgLine2 += `<pattern id="pattern" width="${props.unit=='in'?120:100}" height="${rpxToPx(28)}" patternUnits="userSpaceOnUse">`
|
|
|
+
|
|
|
+ if (props.unit=='in'){
|
|
|
+ for (var i = 0; i < 12; i++) {
|
|
|
+ var obj = list[i];
|
|
|
+ svgLine2 += `<line x1="${i * 12 + 1}" y1="0" x2="${i * 12 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}" stroke-width="2"/>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ for (var i = 0; i < 10; i++) {
|
|
|
+ var obj = list[i];
|
|
|
+ svgLine2 += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}" stroke-width="2"/>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ svgLine2 += `</pattern>
|
|
|
+ <rect width="100%" height="100%" fill="url(#pattern)" />
|
|
|
+ </svg>`
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const isLeonTest = true
|
|
|
+
|
|
|
+ return <View className="slidng">
|
|
|
+ <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
|
|
|
+ {
|
|
|
+ process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{ fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{current}</Text> :
|
|
|
+ <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}
|
|
|
+ showsHorizontalScrollIndicator={false}
|
|
|
+ scrollX scrollLeft={left} className="scroll"
|
|
|
+ enablePassive={true}
|
|
|
+ fastDeceleration={true}
|
|
|
+ onScrollEnd={scrollEnd}
|
|
|
+ onDragEnd={dragEnd}
|
|
|
+ onTouchStart={touchStart}
|
|
|
+ onTouchEnd={touchEnd}
|
|
|
+ onDragStart={dragStart}
|
|
|
+ onScroll={scrollContent}
|
|
|
+ enhanced
|
|
|
+ >
|
|
|
+ <View className="scrollContent">
|
|
|
+ <View className="scrollPadding" style={{ width: rpxToPx(372) }} />
|
|
|
+ <View className="content">
|
|
|
+ {
|
|
|
+ !isLeonTest && list.map((item, index) => {
|
|
|
+ return <View className={(item as any).showBig ? 'slidng_item_big' : (item as any).showMiddle ? 'slidng_item_middle' : 'slidng_item'}
|
|
|
+ style={{ width: 2, marginRight: list.length - 1 == index ? 0 : 8, backgroundColor: props.themeColor, zIndex: 0 }} key={index}>
|
|
|
+ {
|
|
|
+ (item as any).showBig ? <Text className="slidng_text">{(item as any).value}</Text> : null
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ })
|
|
|
+ }
|
|
|
+ {
|
|
|
+ isLeonTest && <View>
|
|
|
+ <View style={{ width: list.length * 10 - 8, height: 100 }}>
|
|
|
+ {
|
|
|
+ process.env.TARO_ENV == 'weapp' && <View style={{ width: list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines }} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ process.env.TARO_ENV == 'rn' && <SvgXml xml={svgLine2} width={list.length * 10 - 8} height={rpxToPx(28)} />
|
|
|
+ }
|
|
|
+
|
|
|
+ {process.env.TARO_ENV == 'weapp' &&
|
|
|
+ <View style={{ width: list.length * 10 - 8 + 60, marginLeft: -30, height: rpxToPx(38), backgroundImage: imgNum }} />}
|
|
|
+ {
|
|
|
+ process.env.TARO_ENV == 'rn' &&
|
|
|
+ <View style={{ flexDirection: 'row', marginLeft: -30, height: rpxToPx(40) }}>
|
|
|
+ <SvgXml xml={svgNumber} width={list.length * 10 - 8 + 60} height={rpxToPx(40)} />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ </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>
|
|
|
+}
|
