iOS 边缘滑动 loadmore 修复

src/components/SubScreen/index.jsx

@@ -7,13 +7,17 @@ import {useSpring, useSpringRef} from "@react-spring/core";
 import {sleep} from "@utils/helpers";
 import {useThemeProvider} from "@contexts/themeContext";
 import CSSTransition from "react-transition-group/CSSTransition";
+import useEdgeGesture from "@hooks/useEdgeGesture";
+import {toast} from "react-toastify";
 const i18n=global.i18n;
 
 const SubScreen=({open,onClose,children,route,timeout=500,level=0,header,...props})=>{
     // const [subOpen,setSubOpen]=useState(open);
     // console.log(header)
+    const {getSidedGesture,setSidedGesture}=useEdgeGesture();
     const subOpen=open;
     const duration=timeout;
+    let isSideGesture=getSidedGesture();
     const {setIsOpenSub}=useThemeProvider();
     if (level===0)setIsOpenSub(subOpen);
     // const duration=50;
@@ -73,12 +77,18 @@ const SubScreen=({open,onClose,children,route,timeout=500,level=0,header,...prop
             </div>
         )
     }
+    useEffect(()=>{
+        setSidedGesture(0);
+        return ()=>{
+            setSidedGesture(0);
+        }
+    },[])
     return (
         <CSSTransition timeout={timeout} {...props} classNames={{
-            enter: styles.subscreen_enter,
-            enterActive: styles.subscreen_enter_active,
-            exit: styles.subscreen_exit,
-            exitActive: styles.subscreen_exit_active,
+            enter: isSideGesture?styles.subscreen_enter_gesture:styles.subscreen_enter,
+            enterActive: isSideGesture?styles.subscreen_enter_active_gesture:styles.subscreen_enter_active,
+            exit: isSideGesture?styles.subscreen_exit_active_gesture:styles.subscreen_exit,
+            exitActive: isSideGesture?styles.subscreen_exit_active_gesture:styles.subscreen_exit_active,
         }}>
             {/*<animated.div className={styles.subscreen} style={showAni}>*/}
             {/*<animated.div className={styles.subscreen}>*/}

src/components/SubScreen/styles.module.scss

@@ -12,6 +12,18 @@
   transition: transform var(--transition);
   transform: translateX(100%) translateZ(0);
 }
+.subscreen_enter_gesture{
+  transform: translateX(0%) translateZ(0);
+}
+.subscreen_enter_active_gesture{
+  transform: translateX(0%) translateZ(0);
+}
+.subscreen_exit_gesture{
+  transform: translateX(100%) translateZ(0);
+}
+.subscreen_exit_active_gesture{
+  transform: translateX(100%) translateZ(0);
+}
 .subscreen{
   display: flex;
   position: fixed;

src/features/api.js

@@ -77,8 +77,15 @@ export const reqGameList=createAsyncThunk(
     async (arg,thunkAPI) => {
         const {mkey,tabtype,page}=arg;
         // https://api.ouro777.com/game/gameList/?type=2&page=2
-        const url=APP_GAME_LIST+"?type="+tabtype+"&page="+page;
-        const response = await Http.get({url:url});
+        // const url=APP_GAME_LIST+"?type="+tabtype+"&page="+page;
+        let params={
+            url:APP_GAME_LIST,
+            params:{
+                type:tabtype,
+                page:page
+            }
+        }
+        const response = await Http.get(params);
         if (response)response.mkey=mkey;
         thunkAPI.dispatch(updateGameList(response));
         return response;

src/hooks/useEdgeGesture.js

@@ -0,0 +1,88 @@
+import {useEffect, useState} from "react";
+import {toast} from "react-toastify";
+import {localStorageGet, localStorageSet} from "@utils/helpers";
+const objInfo={
+    timer:null
+}
+const useEdgeGesture = () => {
+    const [isSideGesture, setIsSideGesture] = useState(false);
+    const getSidedGesture = () => {
+        let isguesture=parseInt(localStorageGet("IOS_GUESTURE",0));
+        if (isguesture===1){
+            return 1;
+        }
+        return 0;
+    }
+    const setSidedGesture = (isGuesture=0) => {
+        setIsSideGesture(isGuesture);
+        localStorageSet("IOS_GUESTURE",isGuesture);
+    }
+    let isEdgeGesture=false;
+    let isTouchingEdge = false;
+    const handleGesture=(e)=>{
+        if (global.isIOS){
+            // 获取触摸点的坐标
+            const touchX = e.touches[0].clientX;
+            const touchY = e.touches[0].clientY;
+
+            // 假设边缘手势区域的阈值为 20px
+            const edgeThreshold = 20;
+
+            // 检查触摸点是否在屏幕边缘
+            const isGesture = touchX < edgeThreshold || touchX > window.innerWidth - edgeThreshold ||
+                touchY < edgeThreshold || touchY > window.innerHeight - edgeThreshold;
+            isEdgeGesture=isGesture;
+            if (isEdgeGesture) {
+                isTouchingEdge = false;
+                // 如果触摸点在边缘区域内
+                removeTouchMove();
+                document.addEventListener("touchmove",handleGestureMove);
+            } else {
+                // 如果触摸点不在边缘区域内，重置触摸边缘的状态
+                isTouchingEdge = false;
+                setSidedGesture(0);
+                removeTouchMove();
+            }
+        }
+    }
+    const handleGestureMove=(e)=>{
+        if (isEdgeGesture){
+            if (!isTouchingEdge) {
+                // 如果之前没有触摸边缘，记录触摸边缘的状态，并设置一个定时器
+                isTouchingEdge = true;
+                resetTimer();
+                objInfo.timer=setTimeout(function() {
+                    if (isTouchingEdge) {
+                        // console.log('用户执行了边缘手势');
+                        // // 这里可以执行相应的逻辑
+                        setSidedGesture(1);
+                        // toast.success("11111111");
+                        isTouchingEdge = false;
+                        removeTouchMove();
+                    }
+                }, 60); // 设置一个时间阈值，例如 300 毫秒
+            }
+        }
+    }
+    const resetTimer=()=>{
+        if (objInfo.timer!=null){
+            clearTimeout(objInfo.timer);
+            objInfo.timer=null;
+        }
+    }
+    const removeTouchMove=()=>{
+        document.removeEventListener('touchmove', handleGestureMove);
+    }
+    useEffect(() => {
+        // 监听 touchstart 事件
+        document.addEventListener('touchstart', handleGesture);
+        // document.addEventListener('touchmove', handleGesture);
+        return ()=>{
+            document.removeEventListener('touchstart', handleGesture);
+            removeTouchMove();
+            resetTimer();
+        }
+    }, []);
+    return {isSideGesture,setIsSideGesture,getSidedGesture,setSidedGesture};
+}
+export default useEdgeGesture;

src/hooks/usePreviousRoute.js

@@ -1,5 +1,6 @@
 import {useLocation} from 'react-router-dom';
 import {useEffect, useRef, useState} from 'react';
+import {toast} from "react-toastify";
 const usePreviousRoute = () => {
     const location = useLocation();
     const [preLocation, setPreLocation] = useState({});
@@ -10,7 +11,6 @@ const usePreviousRoute = () => {
             setPreLocation({...currentLocation})
             setCurrentLocation({...location});
         }, [location]);
-
     return preLocation;
 }
 

src/layout/Layout.jsx

@@ -28,6 +28,7 @@ import WDPassBox from "@widgets/WWithdraw/PassBox/WDPassBox";
 import {ROUTE_PATH} from "@constants/routes";
 import DropCoins from "@components/DropCoins";
 import {toast} from "react-toastify";
+import useEdgeGesture from "@hooks/useEdgeGesture";
 const PageNotFound = lazy(() => import('@pages/PageNotFound'));
 
 const Layout=({...props})=>{
@@ -40,6 +41,8 @@ const Layout=({...props})=>{
     const popRoutes=useSelector(routesPop);
     const isLogin=useSelector(isLogined);
     const navigate=useNavigate();
+    const {getSidedGesture}=useEdgeGesture();
+    const isGesture=getSidedGesture();
     // const {setLockPath}=useAuthLockRoute();
     useEffect(() => {
         // scroll to top on route change
@@ -55,7 +58,7 @@ const Layout=({...props})=>{
         if (hash==null||hash==="")isShowSub=false;
         return (
             <>
-                <div className={`app ${isShowSub ? 'app_openSub' : ''}`} ref={appRef}>
+                <div className={`app ${isShowSub ? 'app_openSub' : ''} ${isGesture?'app_gestureSub':''}`} ref={appRef}>
                     <ScrollToTop/>
                     <AppContainer>
                         <div className="app_container-content d-flex flex-column flex-1">
@@ -67,7 +70,7 @@ const Layout=({...props})=>{
                     </AppContainer>
                     <GameSearchPanel/>
                 </div>
-                <div className={`app-top  ${isShowSub ? 'app_openSub' : ''}`}>
+                <div className={`app-top  ${isShowSub ? 'app_openSub' : ''} ${isGesture?'app_gestureSub':''}`}>
                     <Sidebar/>
                     <Navbar/>
                     {isMobile() && <BottomNav/>}

src/styles/_global.scss

@@ -30,6 +30,9 @@ body {
         transform: translateX(-50%) translateZ(0);
         opacity: 0;
     }
+    &_gestureSub{
+        transition: none !important;
+    }
     &_container {
         display: flex;
         flex-direction: column;