fix: update backtop demos

xiaoyatong · xiaoyatong · commit e81cddaa6fea · 2024-12-16T17:22:20.000+08:00
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

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ const Demo5 = () => {`
`7`	`7`	`console.log('触发返回顶部')`
`8`	`8`	`}`
`9`	`9`	`return (`
`10`		`- <div style={{ height: '100vh', overflowY: 'auto' }} id="target">`
	`10`	`+ <div style={{ height: '100vh' }} id="target">`
`11`	`11`	`{new Array(24).fill(0).map((_, index) => {`
`12`	`12`	`return <Cell key={index}>我是测试数据{index}</Cell>`
`13`	`13`	`})}`
Original file line number	Diff line number	Diff line change
`@@ -3,12 +3,12 @@ import { BackTop, Cell } from '@nutui/nutui-react-taro'`
`3`	`3`
`4`	`4`	`const Demo2 = () => {`
`5`	`5`	`return (`
`6`		`- <div style={{ height: '100vh' }}>`
	`6`	`+ <>`
`7`	`7`	`{new Array(24).fill(0).map((_, index) => {`
`8`	`8`	`return <Cell key={index}>我是测试数据{index}</Cell>`
`9`	`9`	`})}`
`10`	`10`	`<BackTop threshold={200} />`
`11`		`- </div>`
	`11`	`+ </>`
`12`	`12`	`)`
`13`	`13`	`}`
`14`	`14`	`export default Demo2`