update

src/components/input/LimitPickers.tsx

@@ -174,7 +174,7 @@ const Component = forwardRef((props: {
         if (getTimestamp(time) > global.set_time) {
             Taro.showToast({
                 icon: 'none',
-                title: t('feature.common.toast.min_value'),
+                title: t('feature.common.toast.min_time_value'),
             })
             setValues([values[0], (new Date(global.set_time)).getHours(), (new Date(global.set_time)).getMinutes()])
             return
@@ -185,7 +185,7 @@ const Component = forwardRef((props: {
             if (getTimestamp(time) < props.limit) {
                 Taro.showToast({
                     icon: 'none',
-                    title: t('feature.common.toast.max_value'),
+                    title: t('feature.common.toast.max_time_value'),
                 })
                 setValues([(props.limitDay ? props.limitDay - 1 : 6) - getDaysDiff(limitDate), limitDate.getHours(), limitDate.getMinutes()])
                 return

src/components/input/SlidngScale.scss

@@ -128,7 +128,7 @@
     width: 750px;
 }
 
-/* #ifdef weapp */
+
 .shadow_left {
     pointer-events: none;
     position: absolute;
@@ -137,7 +137,7 @@
     height: 120px;
     width: 375px;
     background: linear-gradient(90deg, #1C1C1C 1%, rgba(28, 28, 28, 0) 100%);
-    z-index: 1;
+    z-index: 100;
 }
 
 .shadow_right {
@@ -148,7 +148,7 @@
     height: 120px;
     width: 375px;
     background: linear-gradient(90deg, rgba(28, 28, 28, 0) 1%, #1C1C1C 100%);
-    z-index: 1;
+    z-index: 100;
 }
 
 .shadow_top {
@@ -159,9 +159,12 @@
     right: 0;
     bottom: 0;
     background: linear-gradient(180deg, rgba(182, 225, 252, 0.1) 18%, rgba(28, 28, 28, 0) 100%);
-    z-index: 1;
+    z-index: 100;
 }
 
+/* #ifdef weapp */
+
+
 /* #endif */
 
 /* #ifdef rn */

src/components/input/SlidngScale.tsx

@@ -1,7 +1,9 @@
 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";
 
 export default function Component(props: {
     step: number, min: number,
@@ -9,8 +11,8 @@ export default function Component(props: {
     themeColor: string
 }) {
     const scrollViewRef = useRef<any>();
-    const minNum: number = props.min;
-    const maxNum: number = props.max;
+    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 stepNum: number = props.step * 10;
@@ -21,7 +23,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 [showScrollView, setShowScrollView] = useState(false)
+    const [showScrollView, setShowScrollView] = useState(true)
 
     for (var i: number = minNum; i <= maxNum; i += props.step) {
         var value: number = parseFloat(i.toFixed(1));
@@ -37,12 +39,9 @@ export default function Component(props: {
     }
 
     useEffect(() => {
-        // var  aa = current-props.min;
-        // var bb = aa/props.step*slidngWidth;
-        // setLeft(bb/ratio)
-        setTimeout(() => {
-            setShowScrollView(true)
-        }, 50)
+        // setTimeout(() => {
+        //     setShowScrollView(true)
+        // }, 50)
     }, [])
 
     // const dpr = Taro.pxTransform//Taro.getSystemInfoSync().pixelRatio; 
@@ -86,6 +85,18 @@ export default function Component(props: {
         setLeft(scrollLeft)
     }
 
+    console.log(list.length)
+
+    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>
@@ -98,26 +109,35 @@ export default function Component(props: {
             <View className="shadow_right" />
             {showScrollView && <View className="top_line" style={{ backgroundColor: props.themeColor }} />}
             {
-                showScrollView && <ScrollView style={{ zIndex: 0 }} ref={scrollViewRef} scrollX enhanced scrollLeft={left} className="scroll" onScroll={handleScroll} onDragEnd={scrollEnd}>
+                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 }} key={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="demo2"/> */}
                         <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" /> */}

src/components/input/SlidngScale_backup.tsx

@@ -0,0 +1,124 @@
+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 - minNum) * slidngWidth / props.step + 1);
+    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(() => {
+        // var  aa = current-props.min;
+        // var bb = aa/props.step*slidngWidth;
+        // setLeft(bb/ratio)
+        setTimeout(() => {
+            setShowScrollView(true)
+        }, 50)
+    }, [])
+
+    // const dpr = Taro.pxTransform//Taro.getSystemInfoSync().pixelRatio; 
+
+
+    const handleScroll = (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);
+            // setLeft((parseFloat(data+'') - props.min) * slidngWidth / props.step + 1);
+
+            props.changed(data);
+        }
+    };
+
+    const scrollEnd = (e) => {
+        const { scrollLeft } = e.detail;
+        setLeft(scrollLeft)
+    }
+
+    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 style={{ zIndex: 0 }} 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 }} key={index}>
+                                    {
+                                        item.showBig ? <Text className="slidng_text">{item.value}</Text> : null
+                                    }
+                                </View>
+                            })
+                        }
+                    </View>
+
+                    <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>
+}

src/context/locales/zh.js

@@ -90,6 +90,8 @@ export default {
             toast: {
                 min_value: '不能再小了',
                 max_value: '不能再大了',
+                min_time_value: '不能再晚了',
+                max_time_value: '不能再早了',
                 update_success: '更新成功',
                 input_nickname:'请输入昵称',
                 ongoing:'请先完成记录',//进行中点击加号,actionsheet item时弹此提示

src/features/trackSomething/components/MetricModalAdd.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from '@tarojs/components'
+import { View, Text, CoverView } from '@tarojs/components'
 import './MetricModalAdd.scss'
 import { useTranslation } from 'react-i18next'
 import { alphaToHex } from '@/utils/tools'
@@ -34,6 +34,7 @@ export default function Component(props: { item: any, strTime: string, showPicke
                         </View>
                     })
                 }
+                <CoverView style={{position:'absolute',left:0,width:175,top:0,bottom:0,zIndex:100000,background:'pink'}}></CoverView>
             </View>
             <View className="change_time_bg ">
                 <View className="gray1 time_bg" onClick={() => { props.showPicker(metricItem) }}>