update

src/app.config.ts

@@ -1,11 +1,9 @@
 const appConfig = defineAppConfig({
   pages: [
-    
     'pages/clock/Clock',
-    
     'pages/demo',
     
-    
+
     'pages/index/index',
     'pages/account/Login',
     'pages/account/Auth',

src/components/input/SlidngScale.tsx

@@ -11,7 +11,7 @@ var lastValue = 0
 export default function Component(props: {
     step: number, min: number,
     max: number, default_value: number,
-    scale:number,
+    scale: number,
     changed: Function, unit: string
     themeColor: string,
     updateStatus: Function
@@ -25,7 +25,7 @@ export default function Component(props: {
     // 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 jingdu: number = props.step < 0.1 ? 100 : props.step < 1 ? 10 : 1;
     const list: any[] = [];
     // const [list, setList] = useState([])
 
@@ -38,7 +38,7 @@ export default function Component(props: {
     const [enableText, setEnableText] = useState(true)
 
     for (var i: number = minNum; i <= maxNum; i += props.step) {
-        var value: number = parseFloat(i.toFixed(props.scale==0?1:props.scale));
+        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;
 
@@ -49,7 +49,6 @@ export default function Component(props: {
         })
 
     }
-    console.log(list)
 
     // const [showScrollView, setShowScrollView] = useState(false)
 
@@ -156,7 +155,7 @@ export default function Component(props: {
         const { scrollLeft } = e.detail;
 
         var count = scrollLeft / slidngWidth;
-        var strValue = (minNum + Math.round(count) * props.step).toFixed(props.scale==0?1:props.scale);
+        var strValue = (minNum + Math.round(count) * props.step).toFixed(props.scale == 0 ? 1 : props.scale);
         if ((strValue as any) < minNum) {
             strValue = minNum as any;
         }
@@ -168,7 +167,7 @@ export default function Component(props: {
         if (parseFloat(strValue) != current) {
             var data = strValue as any;
             if (props.step < 1) {
-                data = parseFloat(strValue).toFixed(props.scale==0?1:props.scale);
+                data = parseFloat(strValue).toFixed(props.scale == 0 ? 1 : props.scale);
                 if (data.indexOf('.') > 0) {
                     const regexp = /(?:\.0*|(\.\d+?)0+)$/
                     data = data.replace(regexp, '$1')
@@ -191,15 +190,26 @@ export default function Component(props: {
         // setLeft(scrollLeft)
     }
 
-    // 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>
-    // }
+    function itemContent(data) {
+        var item = list[data.index]
+        var index = data.index
+        return <View style={{ width: 2, height: 100, backgroundColor: 'red', marginRight: 8 }}></View>
+        // 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>
+    }
+
+    var svg2 = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8}" height="50">`;
+    for (var i = 0; i < list.length; i++) {
+        var obj = list[i];
+        svg2 += `<line x1="${i * 10}" y1="0" x2="${i * 10}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
+        if (obj.showBig) {
+            svg2 += `<text x="${i * 10}" y="${rpxToPx(30 + 36)}" text-anchor="middle" fill="white" font-size="${rpxToPx(36)}">${obj.value}</text>`
+        }
+    }
+    svg2 += `</svg>`
 
     return <View className="slidng">
         <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
@@ -228,7 +238,7 @@ export default function Component(props: {
                 <View className="scrollContent">
                     <View className="scrollPadding" style={{ width: rpxToPx(372) }} />
                     <View className="content">
-                        {
+                        {/* {
                             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}>
@@ -237,8 +247,10 @@ export default function Component(props: {
                                     }
                                 </View>
                             })
-                        }
-                        {/* <View style={{position:'fixed',right:0,top:0,width:100,bottom:0,backgroundColor:'red',zIndex:10}}/> */}
+                        } */}
+                        <View style={{ width: list.length * 10 - 8, height: 200 }}>
+                            <mysvg src={svg2} />
+                        </View>
                     </View>
                     <View className="scrollPadding" />
 

src/pages/demo.scss

@@ -0,0 +1,3 @@
+.virtual-waterfall-0-left{
+    height: 0;
+}

src/pages/demo.tsx

@@ -1,37 +1,84 @@
 import MoveList from '@/features/trackSomething/components/MoveList';
 import MoveOrderList from '@/features/trackSomething/components/MoveOrderList';
-import { Canvas, View, Text, PageContainer } from '@tarojs/components';
+import { rpxToPx } from '@/utils/tools';
+import { Canvas, View, Text, PageContainer, ScrollView } from '@tarojs/components';
 
 import { MovableArea, MovableView } from "@tarojs/components";
+import VirtualList from '@tarojs/components/virtual-list';
+import React from 'react';
 import { useEffect, useState } from 'react';
+import './demo.scss'
+import Taro from '@tarojs/taro';
+
+
+
+
 
 export default function Demo() {
-  const [show,setShow] = useState(false)
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="4000" height="200">
+  <text x="0" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="250" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="500" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="750" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="1000" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="1250" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="1500" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="1750" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="2000" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="2250" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="2500" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="2750" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+  <text x="3000" y="100" font-size="24" fill="red">Hello, SVG Text!</text>
+</svg>`
 
-  function items() {
-    var array = []
-    for (var i = 0; i < 55; i++) {
-      var item = (
-        <View style={{ height: 60, color: '#fff', width: 375, display: 'flex', flexDirection: 'row', alignItems: 'center' }}><Text style={{}}>第{i}咧</Text></View>
-      )
-      array.push(item)
-    }
-    return array
-  }
+const svg2 = `
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="50">
+  <!-- 尺子底部线条 -->
+  <line x1="10" y1="25" x2="390" y2="25" stroke="white" stroke-width="2" />
 
+  <!-- 刻度线和数字 -->
+  <g transform="translate(10, 0)">
+    <!-- 刻度和数字 -->
+    <g>
+      <!-- 起点刻度 -->
+      <line x1="0" y1="20" x2="0" y2="30" stroke="white" stroke-width="2" />
+      <text x="0" y="45" text-anchor="middle" fill="white">0</text>
 
-  return (
+      <!-- 终点刻度 -->
+      <line x1="380" y1="20" x2="380" y2="30" stroke="white" stroke-width="2" />
+      <text x="380" y="45" text-anchor="middle" fill="white">100</text>
+    </g>
 
+    <!-- 10个刻度一个间隔的刻度和数字 -->
+    <g>
+      <!-- 刻度线和数字 -->
+      <g transform="translate(10, 0)" ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9]">
+        <line x1="0" y1="20" x2="0" y2="30" stroke="white" stroke-width="2" />
+        <text x="0" y="45" text-anchor="middle" fill="white">{{ i * 10 }}</text>
+      </g>
+    </g>
+  </g>
+</svg>`
 
+
+  return (
     <View>
-      <View style={{height:50}}/>
-      <MoveOrderList itemHeight={60} array={items()} />
-      <Text style={{color:'#fff',fontWeight:'bold'}} onClick={()=>setShow(true)}>打开page container</Text>
-      <PageContainer style={{backgroundColor:'transparent'}} 
-      overlayStyle='background:transparent'
-      show={show} round={true} overlay={true} position='bottom' onAfterLeave={()=>setShow(false)}>
-        <View style={{width:200,height:200,backgroundColor:'pink',margin:50}}/>
-      </PageContainer>
+      <ScrollView scrollX>
+        <View style={{ width: 400, height: 200 }}>
+          <mysvg src={svg2} />
+        </View>
+      </ScrollView>
+
     </View>
+
+    // <VirtualList
+    //   // layout="horizontal"
+    //   height={800} /* 列表的高度 */
+    //   width={375} /* 列表的宽度 */
+    //   item={Row} /* 列表单项组件，这里只能传入一个组件 */
+    //   itemData={buildData(0)} /* 渲染列表的数据 */
+    //   itemCount={1000} /* 渲染列表的长度 */
+    //   itemSize={100} /* 列表单项的高度  */
+    // />
   )
 }