fix: popup 不该是 overflow-y auto

jdf2e · Dec 9, 2024 · 808e9cc · 808e9cc
1 parent 71e34d2
commit 808e9cc
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 25 deletions.
diff --git a/src/packages/cascader/cascader.taro.tsx b/src/packages/cascader/cascader.taro.tsx
@@ -483,7 +483,6 @@ const InternalCascader: ForwardRefRenderFunction<
           {...popupProps}
           visible={innerVisible}
           position="bottom"
-          style={{ overflowY: 'hidden' }}
           round
           closeIcon={closeIcon}
           closeable={closeable}

diff --git a/src/packages/popup/demos/h5/demo1.tsx b/src/packages/popup/demos/h5/demo1.tsx
@@ -1,25 +1,28 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react'
 
-const Demo1 = () => {
-  const [showBasic, setShowBasic] = useState(false)
+const Demo = () => {
+  const [showIcon, setShowIcon] = useState(false)
+
   return (
     <>
       <Cell
-        title="展示弹出层"
+        title="基础弹框"
         onClick={() => {
-          setShowBasic(true)
+          setShowIcon(true)
         }}
       />
       <Popup
-        zIndex={2000}
-        visible={showBasic}
-        style={{ padding: '30px 50px' }}
+        closeable
+        visible={showIcon}
+        title="标题"
+        description="这里是副标题这是副标题"
+        position="bottom"
         onClose={() => {
-          setShowBasic(false)
+          setShowIcon(false)
         }}
       />
     </>
   )
 }
-export default Demo1
+export default Demo
diff --git a/src/packages/popup/demos/h5/demo2.tsx b/src/packages/popup/demos/h5/demo2.tsx
@@ -6,6 +6,7 @@ const Demo2 = () => {
   const [showBottom, setShowBottom] = useState(false)
   const [showLeft, setShowLeft] = useState(false)
   const [showRight, setShowRight] = useState(false)
+  const [showText, setShowText] = useState(false)
 
   return (
     <>
@@ -33,6 +34,12 @@ const Demo2 = () => {
           setShowRight(true)
         }}
       />
+      <Cell
+        title="居中弹出"
+        onClick={() => {
+          setShowText(true)
+        }}
+      />
       <Popup
         visible={showTop}
         destroyOnClose
@@ -50,20 +57,33 @@ const Demo2 = () => {
       />
       <Popup
         visible={showLeft}
-        style={{ width: '40%', height: '100%' }}
         position="left"
         onClose={() => {
           setShowLeft(false)
         }}
       />
       <Popup
         visible={showRight}
-        style={{ width: '40%', height: '100%' }}
         position="right"
         onClose={() => {
           setShowRight(false)
         }}
       />
+      <Popup
+        visible={showText}
+        style={{ padding: '30px 50px' }}
+        onClose={() => {
+          setShowText(false)
+        }}
+      >
+        <div style={{ height: '100px', overflowY: 'auto' }}>
+          {Array.from({ length: 10 })
+            .fill('')
+            .map((_, i) => (
+              <Cell key={i}>正文</Cell>
+            ))}
+        </div>
+      </Popup>
     </>
   )
 }

diff --git a/src/packages/popup/demos/taro/demo2.tsx b/src/packages/popup/demos/taro/demo2.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Popup, Cell } from '@nutui/nutui-react-taro'
-import { ScrollView, View, Text } from '@tarojs/components'
+import { ScrollView, Text } from '@tarojs/components'
 
 const Demo2 = () => {
   const [showTop, setShowTop] = useState(false)
@@ -58,17 +58,7 @@ const Demo2 = () => {
           setShowBottom(false)
         }}
         lockScroll
-      >
-        <ScrollView scrollY style={{ height: '240px' }}>
-          {Array.from({ length: 200 })
-            .fill('')
-            .map((_, i) => (
-              <View key={i}>
-                <Cell>底部弹出-{i}</Cell>
-              </View>
-            ))}
-        </ScrollView>
-      </Popup>
+      />
       <Popup
         visible={showLeft}
         style={{ width: '20%' }}

diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
@@ -4,7 +4,6 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  overflow-y: auto;
   background-color: $overlay-content-bg-color;
   -webkit-overflow-scrolling: touch;
   font-size: $font-size-base;