From 95e11b8560c117f2b9fcc690e193ecb08cee8d9c Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Fri, 3 Feb 2023 14:13:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=BB=9A=E5=8A=A8=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Popup/Popup.js   | 17 +++++++++++++----
 src/components/Popup/Popup.scss |  5 ++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/Popup/Popup.js b/src/components/Popup/Popup.js
index 19f21bc..3adb565 100644
--- a/src/components/Popup/Popup.js
+++ b/src/components/Popup/Popup.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import "./Popup.scss";
 import ShopList from "../ShopList/ShopList.js";
 const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => {
@@ -7,6 +7,7 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => {
   const [start, setStart] = useState(null);
   const [doTransition, setdoTransition] = useState(false);
   const baseHeight = long ? window.innerHeight : 312;
+  const listRef = useRef(null);
   useEffect(() => {
     setdoTransition(true);
     setHeight(long ? window.innerHeight : 312);
@@ -28,7 +29,11 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => {
     );
     if (!touch) return;
     const delta = touch.clientY - start.y;
-    setHeight(baseHeight - delta);
+    if (long) {
+      if (delta > 0) return;
+      if (listRef.current.scrollTop > 0) return;
+    }
+    setHeight(Math.min(baseHeight - delta, window.innerHeight));
   };
   const handleTouchEnd = (e) => {
     if (!start) return;
@@ -37,6 +42,7 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => {
     );
     if (!touch) return;
     setStart(null);
+    if (long && listRef.current.scrollTop > 0) return;
     const delta = touch.clientY - start.y;
     const nxtLong =
       !long && delta < -100 ? true : long && delta > 100 ? false : long;
@@ -71,7 +77,7 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => {
       className={["popup-wrapper", long ? "long" : ""].join(" ")}
       style={{
         height: height + "px",
-        transition: !doTransition ? "none" : "margin-bottom 0.5s ease",
+        transition: !doTransition ? "none" : "height 0.5s ease",
         backgroundImage: mall.theme.image.backgroundImg
           ? `url(${mall.theme.image.backgroundImg})`
           : "",
@@ -82,7 +88,10 @@ const Popup = ({ mall, sceneIndex, onClick, floors, shop, onClickActive }) => {
       onTouchEnd={handleTouchEnd}
     >
       {floors}
-      <div className="listWrapper">
+      <div
+        ref={listRef}
+        className={["listWrapper", long ? "long" : ""].join(" ")}
+      >
         <ShopList
           className="flex1"
           mall={mall}
diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss
index a6588c5..c655a88 100644
--- a/src/components/Popup/Popup.scss
+++ b/src/components/Popup/Popup.scss
@@ -24,6 +24,9 @@
   .listWrapper {
     flex: 1;
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: hidden;
+    &.long {
+      overflow-y: auto;
+    }
   }
 }