|
|
@@ -5,9 +5,15 @@ 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,
|
|
|
@@ -91,18 +97,27 @@ export default function Component(props: {
|
|
|
}, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
- if (isEnd && !isDraging) {
|
|
|
- props.updateStatus(true)
|
|
|
- setEnableText(true)
|
|
|
- }
|
|
|
- else {
|
|
|
- props.updateStatus(false)
|
|
|
- setEnableText(false)
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ if (isEnd && !isDraging) {
|
|
|
+ props.updateStatus(true)
|
|
|
+ setEnableText(true)
|
|
|
+ console.log('true')
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ props.updateStatus(false)
|
|
|
+ setEnableText(false)
|
|
|
+ console.log('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);
|
|
|
@@ -135,8 +150,11 @@ export default function Component(props: {
|
|
|
}
|
|
|
|
|
|
function touchStart() {
|
|
|
- props.updateStatus(false)
|
|
|
- setEnableText(false)
|
|
|
+ if (process.env.TARO_ENV=='weapp'){
|
|
|
+ props.updateStatus(false)
|
|
|
+ setEnableText(false)
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function dragStart(e) {
|
|
|
@@ -215,17 +233,17 @@ export default function Component(props: {
|
|
|
// debugger
|
|
|
|
|
|
var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="${rpxToPx(28)}">`;
|
|
|
- var svgNumber = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8+60}" height="${rpxToPx(38)}">`;
|
|
|
+ var svgNumber = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8 + 60}" height="${rpxToPx(38)}">`;
|
|
|
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>`
|
|
|
+ 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>`
|
|
|
@@ -236,6 +254,16 @@ export default function Component(props: {
|
|
|
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="100" height="${rpxToPx(28)}" patternUnits="userSpaceOnUse">`
|
|
|
+ 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
|
|
|
@@ -243,10 +271,10 @@ export default function Component(props: {
|
|
|
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>
|
|
|
+ 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>
|
|
|
|
|
|
@@ -257,6 +285,7 @@ export default function Component(props: {
|
|
|
<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}
|
|
|
@@ -284,9 +313,21 @@ export default function Component(props: {
|
|
|
{
|
|
|
isLeonTest && <View>
|
|
|
<View style={{ width: list.length * 10 - 8, height: 100 }}>
|
|
|
- {/* <mysvg src={svg2} /> */}
|
|
|
- <View style={{ width: list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines }} />
|
|
|
- <View style={{ width: list.length * 10 - 8+60,marginLeft:-30, height: rpxToPx(38), backgroundImage: imgNum }} />
|
|
|
+ {
|
|
|
+ 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 }}>
|
|
|
+ <SvgXml xml={svgNumber} width={list.length * 10 - 8 + 60} height={rpxToPx(38)} />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
</View>
|
|
|
</View>
|
|
|
}
|