|
|
@@ -4,17 +4,20 @@ 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-1:props.default_value-10//
|
|
|
- const maxNum: number = props.max;//props.step < 1 ?props.default_value+1:props.default_value+10//
|
|
|
-
|
|
|
+ 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[] = [];
|
|
|
@@ -23,7 +26,10 @@ export default function Component(props: {
|
|
|
|
|
|
const [current, setCurrent] = useState(props.default_value)
|
|
|
const [left, setLeft] = useState((props.default_value - minNum) * slidngWidth / props.step + 1);
|
|
|
- const [showScrollView, setShowScrollView] = useState(true)
|
|
|
+ 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));
|
|
|
@@ -38,16 +44,59 @@ export default function Component(props: {
|
|
|
|
|
|
}
|
|
|
|
|
|
+ // useEffect(() => {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // setShowScrollView(true)
|
|
|
+ // }, 200)
|
|
|
+ // }, [])
|
|
|
+
|
|
|
+ // const dpr = Taro.pxTransform//Taro.getSystemInfoSync().pixelRatio;
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
- // setTimeout(() => {
|
|
|
- // setShowScrollView(true)
|
|
|
- // }, 50)
|
|
|
+ let timeoutId;
|
|
|
+
|
|
|
+
|
|
|
}, [])
|
|
|
|
|
|
- // const dpr = Taro.pxTransform//Taro.getSystemInfoSync().pixelRatio;
|
|
|
+ function scrollContent(e) {
|
|
|
+ if (timerA)
|
|
|
+ clearTimeout(timerA);
|
|
|
+
|
|
|
+ timerA = setTimeout(() => {
|
|
|
+ update(e)
|
|
|
+ }, 90) as any
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleScroll = throttle((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)
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- const handleScroll = (e) => {
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ function dragStart(e) {
|
|
|
+ setIsDraging(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ function dragEnd(e) {
|
|
|
+ setIsDraging(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ function update(e) {
|
|
|
const { scrollLeft } = e.detail;
|
|
|
|
|
|
var count = scrollLeft / slidngWidth;
|
|
|
@@ -73,20 +122,19 @@ export default function Component(props: {
|
|
|
data = Math.round(data);
|
|
|
}
|
|
|
|
|
|
- setCurrent(data);
|
|
|
- // setLeft((parseFloat(data+'') - props.min) * slidngWidth / props.step + 1);
|
|
|
|
|
|
+
|
|
|
+ setCurrent(data);
|
|
|
props.changed(data);
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
const scrollEnd = (e) => {
|
|
|
- const { scrollLeft } = e.detail;
|
|
|
- setLeft(scrollLeft)
|
|
|
+ console.log(e, 'end')
|
|
|
+ // const { scrollLeft } = e.detail;
|
|
|
+ // setLeft(scrollLeft)
|
|
|
}
|
|
|
|
|
|
- console.log(list.length)
|
|
|
-
|
|
|
function itemContent(data) {
|
|
|
var item = list[data.index]
|
|
|
var index = data.index
|
|
|
@@ -107,30 +155,39 @@ export default function Component(props: {
|
|
|
<View className="shadow_top" />
|
|
|
<View className="shadow_left" />
|
|
|
<View className="shadow_right" />
|
|
|
- {showScrollView && <View className="top_line" style={{ backgroundColor: props.themeColor }} />}
|
|
|
- {
|
|
|
- showScrollView && <ScrollView style={{ zIndex: 0,position:'relative' }} ref={scrollViewRef} scrollX enhanced scrollLeft={left} className="scroll" onScroll={handleScroll} onDragEnd={scrollEnd}>
|
|
|
- <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 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={scrollContent}
|
|
|
+ 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>
|
|
|
|
|
|
- </ScrollView>
|
|
|
- }
|
|
|
{/* <VirtualList height={rpxToPx(300)} width={rpxToPx(750)} onScroll={handleScroll} layout="horizontal"
|
|
|
initialScrollOffset={left}
|
|
|
itemCount={list.length}
|