From c53503aea865b4afd47db97cd219113a694b08c4 Mon Sep 17 00:00:00 2001
From: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com>
Date: Tue, 24 Dec 2024 11:55:40 +0800
Subject: [PATCH] fix: update backtop demos (#2865)

---
 src/packages/backtop/demo.tsx             |  6 +-----
 src/packages/backtop/demos/h5/demo3.tsx   |  2 +-
 src/packages/backtop/demos/h5/demo5.tsx   |  2 +-
 src/packages/backtop/demos/taro/demo1.tsx | 24 +++-------------------
 src/packages/backtop/demos/taro/demo2.tsx |  4 ++--
 src/packages/backtop/demos/taro/demo3.tsx |  6 +++---
 src/packages/backtop/demos/taro/demo4.tsx | 25 +++--------------------
 7 files changed, 14 insertions(+), 55 deletions(-)

diff --git a/src/packages/backtop/demo.tsx b/src/packages/backtop/demo.tsx
index 62ac74517a..3a273910b6 100644
--- 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
index a423c33f8c..4a5629edf5 100644
--- 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
index bfeb250a5d..6627e270de 100644
--- 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
index 5bdb774ca2..042f0da74f 100644
--- 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
index be6a012bab..edafeeffe0 100644
--- 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
index 01bbd8f666..f146b8347f 100644
--- 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
index ca37958103..bd9a5e9a16 100644
--- 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