feat: 滚动体验优化

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}

src/components/Popup/Popup.scss

@@ -24,6 +24,9 @@
   .listWrapper {
     flex: 1;
     overflow-x: hidden;
+    overflow-y: hidden;
+    &.long {
       overflow-y: auto;
     }
   }
+}