|
@@ -1,5 +1,5 @@
|
|
|
import { View, Text } from "@tarojs/components";
|
|
|
-import { useRef, useState } from "react";
|
|
|
+import { useEffect, useRef, useState } from "react";
|
|
|
import classNames from "classnames";
|
|
|
import styles from "./index.module.less";
|
|
|
|
|
@@ -14,15 +14,17 @@ interface SliderDeleteActionProps {
|
|
|
actions: TAction[]; // 操作按钮列表
|
|
|
children: React.ReactNode;
|
|
|
disabled?: boolean;
|
|
|
+ scrolling?: boolean;
|
|
|
}
|
|
|
|
|
|
-const THRESHOLD = 60; // 滑动阈值
|
|
|
+const THRESHOLD = 120; // 滑动阈值
|
|
|
const DEFAULT_BUTTON_WIDTH = 80; // 默认每个按钮80px
|
|
|
|
|
|
const SliderDeleteAction: React.FC<SliderDeleteActionProps> = ({
|
|
|
actions,
|
|
|
children,
|
|
|
disabled = false,
|
|
|
+ scrolling = false,
|
|
|
}) => {
|
|
|
const [offset, setOffset] = useState(0);
|
|
|
const [open, setOpen] = useState(false);
|
|
@@ -87,24 +89,34 @@ const SliderDeleteAction: React.FC<SliderDeleteActionProps> = ({
|
|
|
action.onClick()
|
|
|
closeSlider()
|
|
|
}
|
|
|
+
|
|
|
+ const renderActionBar = () => {
|
|
|
+ if(!scrolling){
|
|
|
+ return <View
|
|
|
+ className={styles.actions}
|
|
|
+ style={{ width: `${totalActionWidth}px`, right: 0 }}
|
|
|
+ >
|
|
|
+ {actions.map((action, idx) => (
|
|
|
+ <View
|
|
|
+ key={idx}
|
|
|
+ className={styles.actionBtn}
|
|
|
+ style={{ background: action.color || "#ff4d4f" }}
|
|
|
+ onClick={()=> handleActionClick(action)}
|
|
|
+ >
|
|
|
+ {action.text}
|
|
|
+ </View>
|
|
|
+ ))}
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
+ return <></>
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
return (
|
|
|
<View className={styles.sliderDeleteAction}>
|
|
|
- <View
|
|
|
- className={styles.actions}
|
|
|
- style={{ width: `${totalActionWidth}px`, right: 0 }}
|
|
|
- >
|
|
|
- {actions.map((action, idx) => (
|
|
|
- <View
|
|
|
- key={idx}
|
|
|
- className={styles.actionBtn}
|
|
|
- style={{ background: action.color || "#ff4d4f" }}
|
|
|
- onClick={()=> handleActionClick(action)}
|
|
|
- >
|
|
|
- {action.text}
|
|
|
- </View>
|
|
|
- ))}
|
|
|
- </View>
|
|
|
+
|
|
|
<View
|
|
|
className={classNames(styles.content, { [styles.open]: open })}
|
|
|
style={{
|
|
@@ -118,6 +130,7 @@ const SliderDeleteAction: React.FC<SliderDeleteActionProps> = ({
|
|
|
>
|
|
|
{children}
|
|
|
</View>
|
|
|
+ {renderActionBar()}
|
|
|
</View>
|
|
|
);
|
|
|
};
|