|
|
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
import { ColorType } from '@/context/themes/color';
|
|
|
import Taro from '@tarojs/taro';
|
|
|
import { IconDrag } from '@/components/basic/Icons';
|
|
|
+import { rpxToPx } from '@/utils/tools';
|
|
|
|
|
|
export default function Component(props: { array: any, itemHeight: number, color?: string, update: Function }) {
|
|
|
const [list, setList] = useState(props.array)
|
|
|
@@ -27,12 +28,18 @@ export default function Component(props: { array: any, itemHeight: number, color
|
|
|
const ref = useRef(null)
|
|
|
|
|
|
useEffect(() => {
|
|
|
- const query = Taro.createSelectorQuery();
|
|
|
- query.select('#myScrollView').boundingClientRect();
|
|
|
- query.exec((res) => {
|
|
|
- setContentY(res[0].top)
|
|
|
- setContentHeight(res[0].height)
|
|
|
- })
|
|
|
+ if (process.env.TARO_ENV == 'weapp') {
|
|
|
+ const query = Taro.createSelectorQuery();
|
|
|
+ query.select('#myScrollView').boundingClientRect();
|
|
|
+ query.exec((res) => {
|
|
|
+ setContentY(res[0].top)
|
|
|
+ setContentHeight(res[0].height)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
}, [])
|
|
|
|
|
|
function longPress(e, index) {
|
|
|
@@ -174,49 +181,49 @@ export default function Component(props: { array: any, itemHeight: number, color
|
|
|
return -1; // 上滑
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- console.log(list)
|
|
|
return <View id="myScrollView" ref={ref} style={{ height: '100%', overflow: canScroll ? 'scroll' : 'hidden' }} catchMove>
|
|
|
- <MovableArea style={{ height: list.length * props.itemHeight, width: '100vw' }}>
|
|
|
- {list.map((item, index) => {
|
|
|
- return <View style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight, width: '100vw' }}
|
|
|
- onLongPress={(e) => longPress(e, index)}
|
|
|
-
|
|
|
- onTouchMove={(e) => touchMove(e)}
|
|
|
- onTouchEnd={(e) => touchEnd(e)}
|
|
|
- >
|
|
|
- <View className='modal_order_item' style={{ height: 40,flexDirection:'column' }}>
|
|
|
- <View style={{
|
|
|
- height: 40,
|
|
|
- display: 'flex', flexDirection: 'row',
|
|
|
- width:'100%',
|
|
|
- alignItems: 'center', justifyContent: 'space-between'
|
|
|
- }}>
|
|
|
- <Text style={{ color: props.color }}>{item.name}</Text>
|
|
|
- <IconDrag width={17} height={12} />
|
|
|
-
|
|
|
+ <MovableArea style={{ height: list.length * props.itemHeight, width: rpxToPx(750) }}>
|
|
|
+ <View>
|
|
|
+ {
|
|
|
+ list.map((item, index) => {
|
|
|
+ return <View key={index} style={{ opacity: changedIndex == index && hiddenContent ? 0 : 1, height: props.itemHeight, width: rpxToPx(750) }}
|
|
|
+ onLongPress={(e) => longPress(e, index)}
|
|
|
+ onTouchMove={(e) => touchMove(e)}
|
|
|
+ onTouchEnd={(e) => touchEnd(e)}
|
|
|
+ >
|
|
|
+ <View className='modal_order_item' style={{ height: 40, flexDirection: 'column' }}>
|
|
|
+ <View style={{
|
|
|
+ height: 40,
|
|
|
+ display: 'flex', flexDirection: 'row',
|
|
|
+ width: '100%',
|
|
|
+ alignItems: 'center', justifyContent: 'space-between'
|
|
|
+ }}>
|
|
|
+ <Text style={{ color: props.color }}>{item.name}</Text>
|
|
|
+ <IconDrag width={17} height={12} />
|
|
|
+
|
|
|
+ </View>
|
|
|
+ <View className='seperate' />
|
|
|
+ </View>
|
|
|
</View>
|
|
|
- <View className='seperate' />
|
|
|
-
|
|
|
- {/* <Image src={require('@assets/images/menu.png')} style={{width:20,height:20}}/> */}
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ <MovableView style={{ height: changedIndex >= 0 ? props.itemHeight : 0, width: rpxToPx(750) }}
|
|
|
+ direction='vertical'
|
|
|
+ disabled
|
|
|
+ animation={false}
|
|
|
+ y={movaleViewY}
|
|
|
+ >
|
|
|
+ <View className='drag_item' style={{ backgroundColor: props.color }}>
|
|
|
+ {
|
|
|
+ dragIndex >= 0 && <View className='modal_sel_item' style={{ height: 40, border: 'none' }}>
|
|
|
+ <Text style={{ color: 'black', fontWeight: 'bold' }}>{list[changedIndex].name}</Text>
|
|
|
+ <IconDrag width={17} height={12} />
|
|
|
+ </View>
|
|
|
+ }
|
|
|
</View>
|
|
|
- </View>
|
|
|
- })}
|
|
|
- <MovableView style={{ height: changedIndex >= 0 ? props.itemHeight : 0, width: '100vw' }}
|
|
|
- direction='vertical'
|
|
|
- disabled
|
|
|
- animation={false}
|
|
|
- y={movaleViewY}
|
|
|
- >
|
|
|
- <View className='drag_item' style={{ backgroundColor: props.color }}>
|
|
|
- {
|
|
|
- dragIndex >= 0 && <View className='modal_sel_item' style={{ height: 40, border: 'none' }}>
|
|
|
- <Text style={{ color: 'black', fontWeight: 'bold' }}>{list[changedIndex].name}</Text>
|
|
|
- <IconDrag width={17} height={12} />
|
|
|
- </View>
|
|
|
- }
|
|
|
- </View>
|
|
|
- </MovableView>
|
|
|
+ </MovableView>
|
|
|
+ </View>
|
|
|
</MovableArea>
|
|
|
</View>
|
|
|
}
|