fix: update backtop demos (#2865)

jdf2e · Dec 24, 2024 · c53503a · c53503a
1 parent 9be61bf
commit c53503a
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 55 deletions.
diff --git a/src/packages/backtop/demo.tsx b/src/packages/backtop/demo.tsx
@@ -17,11 +17,7 @@ const BackTopDemo = () => {
 
   return (
     <>
-      <div
-        className="demo"
-        style={{ height: '100vh', overflowY: 'auto' }}
-        id="target"
-      >
+      <div className="demo" style={{ height: '100vh' }} id="target">
         <h2>{translated.title}</h2>
         <Demo1 />
       </div>

diff --git a/src/packages/backtop/demos/h5/demo3.tsx b/src/packages/backtop/demos/h5/demo3.tsx
@@ -8,7 +8,7 @@ const Demo3 = () => {
       {new Array(24).fill(0).map((_, index) => {
         return <Cell key={index}>我是测试数据{index}</Cell>
       })}
-      <BackTop threshold={100}>
+      <BackTop threshold={100} target="target">
         <div
           style={{
             display: 'flex',

diff --git a/src/packages/backtop/demos/h5/demo5.tsx b/src/packages/backtop/demos/h5/demo5.tsx
@@ -7,7 +7,7 @@ const Demo5 = () => {
     console.log('触发返回顶部')
   }
   return (
-    <div style={{ height: '100vh', overflowY: 'auto' }} id="target">
+    <div style={{ height: '100vh' }} id="target">
       {new Array(24).fill(0).map((_, index) => {
         return <Cell key={index}>我是测试数据{index}</Cell>
       })}

diff --git a/src/packages/backtop/demos/taro/demo1.tsx b/src/packages/backtop/demos/taro/demo1.tsx
@@ -1,32 +1,14 @@
 import React from 'react'
 import { BackTop, Cell } from '@nutui/nutui-react-taro'
-import { Top } from '@nutui/icons-react-taro'
 
 const Demo1 = () => {
   return (
-    <div>
+    <>
       {new Array(24).fill(0).map((_, index) => {
         return <Cell key={index}>我是测试数据{index}</Cell>
       })}
-      <BackTop
-        threshold={200}
-        style={{
-          bottom: '50px',
-          insetInlineEnd: '20px',
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
-          <Top size={12} />
-          <div style={{ fontSize: '12px' }}>顶部</div>
-        </div>
-      </BackTop>
-    </div>
+      <BackTop />
+    </>
   )
 }
 export default Demo1
diff --git a/src/packages/backtop/demos/taro/demo2.tsx b/src/packages/backtop/demos/taro/demo2.tsx
@@ -3,12 +3,12 @@ import { BackTop, Cell } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   return (
-    <div style={{ height: '100vh' }}>
+    <>
       {new Array(24).fill(0).map((_, index) => {
         return <Cell key={index}>我是测试数据{index}</Cell>
       })}
       <BackTop threshold={200} />
-    </div>
+    </>
   )
 }
 export default Demo2
diff --git a/src/packages/backtop/demos/taro/demo3.tsx b/src/packages/backtop/demos/taro/demo3.tsx
@@ -4,11 +4,11 @@ import { BackTop, Cell } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   return (
-    <div style={{ height: '100vh' }}>
+    <>
       {new Array(24).fill(0).map((_, index) => {
         return <Cell key={index}>我是测试数据{index}</Cell>
       })}
-      <BackTop threshold={100}>
+      <BackTop>
         <div
           style={{
             display: 'flex',
@@ -20,7 +20,7 @@ const Demo3 = () => {
           <div style={{ fontSize: '12px' }}>顶部</div>
         </div>
       </BackTop>
-    </div>
+    </>
   )
 }
 export default Demo3
diff --git a/src/packages/backtop/demos/taro/demo4.tsx b/src/packages/backtop/demos/taro/demo4.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { BackTop, Cell } from '@nutui/nutui-react-taro'
-import { Top } from '@nutui/icons-react-taro'
 
 const Demo4 = () => {
   const handleClick = () => {
@@ -11,30 +10,12 @@ const Demo4 = () => {
     minHeight: 'auto',
   }
   return (
-    <div style={demoStyle} id="target">
+    <>
       {new Array(24).fill(0).map((_, index) => {
         return <Cell key={index}>我是测试数据{index}</Cell>
       })}
-      <BackTop
-        threshold={200}
-        style={{
-          bottom: '50px',
-          right: '20px',
-        }}
-        onClick={handleClick}
-      >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
-          <Top size={12} />
-          <div style={{ fontSize: '12px' }}>顶部</div>
-        </div>
-      </BackTop>
-    </div>
+      <BackTop onClick={handleClick} />
+    </>
   )
 }
 export default Demo4