Ver Fonte

fix: 测试滚动效果

王晓东 há 1 mês atrás
pai
commit
952b550286

+ 30 - 17
src/components/SliderAction/index.tsx

@@ -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>
   );
 };

+ 2 - 2
src/pages/chat/hooks/useChatUI.tsx

@@ -23,7 +23,7 @@ export const useChatUI = (
 } => {
   const [showWelcome, setShowWelcome] = useState(!historyListLength);
   const [inputContainerHeight, setInputContainerHeight] = useState(0);
-  const scrollTop = useTextChat((state)=> state.scrollTop)
+  // const scrollTop = useTextChat((state)=> state.scrollTop)
   
   const bottomSafeHeight = useAppStore((state) => state.bottomSafeHeight);
 
@@ -52,7 +52,7 @@ export const useChatUI = (
         >
           {haveBg ? <IconArrowLeftWhite24 /> : <IconArrowLeft />}
           <PersonalCard agent={agent} haveBg={haveBg} />
-          {scrollTop}
+          {/* {scrollTop} */}
         </View>
       );
     };

+ 8 - 1
src/pages/contact/index.tsx

@@ -18,6 +18,7 @@ import PageTitle from '@/components/PageTitle'
 
 export default function Index() {
   const [searchValue, setSearchValue] = useState("");
+  const [scrollIng, setScrolling] = useState(false);
 
   const fetcher = async ([_url, params, keyword]) => {
     params = params || {};
@@ -154,6 +155,11 @@ export default function Index() {
     return <EmptyData text="暂无联系人" type={"search"} />;
   };
 
+  const handleScrollEnd = ()=> {
+    'worklet'
+    console.log('scrollend')
+  }
+
   return (
     <PageCustom fullPage isTabPage isflex>
       <NavBarNormal
@@ -172,11 +178,12 @@ export default function Index() {
         </View>
         <BlurContainer className="flex flex-col overflow-hidden">
           <View className="px-16 text-gray-45 text-12 leading-20 mb-20 pt-16">
-            共 {totalCount} 个联系人
+            共 {totalCount} 个联系人 {scrollIng ? 'true': 'false'}
           </View>
           <View className="flex-1 h-full overflow-hidden">
           <ScrollView
             scrollY
+            onScrollEnd={handleScrollEnd}
             onScrollToUpper={onScrollToUpper}
             style={{
               flex: 1,