|
|
@@ -10,14 +10,13 @@ var timerA = null
|
|
|
export default function Component(props: {
|
|
|
step: number, min: number,
|
|
|
max: number, default_value: number, changed: Function, unit: string
|
|
|
- themeColor: 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 [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[] = [];
|
|
|
@@ -27,7 +26,7 @@ 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 [isDraging, setIsDraging] = useState(false)
|
|
|
- const [timeoutId, setTimeoutId] = useState(null);
|
|
|
+ const [isEnd, setIsEnd] = useState(true)
|
|
|
|
|
|
// const [showScrollView, setShowScrollView] = useState(false)
|
|
|
|
|
|
@@ -44,56 +43,42 @@ export default function Component(props: {
|
|
|
|
|
|
}
|
|
|
|
|
|
- // useEffect(() => {
|
|
|
- // setTimeout(() => {
|
|
|
- // setShowScrollView(true)
|
|
|
- // }, 200)
|
|
|
- // }, [])
|
|
|
-
|
|
|
- // const dpr = Taro.pxTransform//Taro.getSystemInfoSync().pixelRatio;
|
|
|
-
|
|
|
useEffect(() => {
|
|
|
- let timeoutId;
|
|
|
-
|
|
|
-
|
|
|
- }, [])
|
|
|
+ if (isEnd && !isDraging)
|
|
|
+ props.updateStatus(true)
|
|
|
+ }, [isEnd, isDraging])
|
|
|
|
|
|
function scrollContent(e) {
|
|
|
if (timerA)
|
|
|
clearTimeout(timerA);
|
|
|
|
|
|
timerA = setTimeout(() => {
|
|
|
+
|
|
|
update(e)
|
|
|
- }, 90) as any
|
|
|
+ setIsDraging(false)
|
|
|
+ }, 250) 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)
|
|
|
- }
|
|
|
+ update(e)
|
|
|
|
|
|
|
|
|
|
|
|
- },200);
|
|
|
+ }, 500);
|
|
|
|
|
|
function dragStart(e) {
|
|
|
+ setIsEnd(false)
|
|
|
setIsDraging(true)
|
|
|
+ props.updateStatus(false)
|
|
|
}
|
|
|
|
|
|
function dragEnd(e) {
|
|
|
- setIsDraging(false)
|
|
|
+ setIsEnd(true)
|
|
|
+ console.log('end')
|
|
|
+ // setIsDraging(false)
|
|
|
}
|
|
|
|
|
|
function update(e) {
|
|
|
@@ -125,7 +110,7 @@ export default function Component(props: {
|
|
|
|
|
|
|
|
|
setCurrent(data);
|
|
|
- props.changed(data);
|
|
|
+ // props.changed(data);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -146,7 +131,7 @@ export default function Component(props: {
|
|
|
}
|
|
|
|
|
|
return <View className="slidng">
|
|
|
- <View className="number_bg">
|
|
|
+ <View className="number_bg" style={{ opacity: (isDraging || !isEnd) ? 0.4 : 1 }}>
|
|
|
<Text className="number">{current}</Text>
|
|
|
<Text className="unit">{props.unit}</Text>
|
|
|
</View>
|
|
|
@@ -164,7 +149,7 @@ export default function Component(props: {
|
|
|
onScrollEnd={scrollEnd}
|
|
|
onDragEnd={dragEnd}
|
|
|
onDragStart={dragStart}
|
|
|
- onScroll={handleScroll}
|
|
|
+ onScroll={scrollContent}
|
|
|
enhanced
|
|
|
>
|
|
|
<View className="scrollContent">
|