fix(backtop): demo拆解与规范 (#2025)

src/packages/backtop/demo.taro.tsx

@@ -1,78 +1,35 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { Top } from '@nutui/icons-react-taro'
-import { BackTop, Cell } from '@/packages/nutui.react.taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
-
-interface T {
-  title: string
-  clg: string
-  backText: string
-  content: string
-}
+import Demo1 from './demos/taro/demo1'
 
 const BackTopDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       title: '基础用法',
-      clg: '触发返回顶部',
-      content: '我是测试数据',
-      backText: '顶部',
     },
     'en-US': {
       title: 'Basic Usage',
-      clg: 'backtop',
-      content: 'test data',
-      backText: 'Top',
     },
     'zh-TW': {
       title: '基礎用法',
-      clg: '觸發返回頂部',
-      content: '我是測試數據',
-      backText: '頂部',
     },
   })
   const demoStyle = {
     height: 'auto',
     minHeight: 'auto',
   }
 
-  const handleClick = () => {
-    console.log(translated.clg)
-  }
-
   return (
     <>
       <Header />
       <div
         className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}
         style={demoStyle}
-        id="target"
       >
         <h2>{translated.title}</h2>
-        {new Array(24).fill(0).map((_, index) => {
-          return <Cell key={index}>{translated.content + index}</Cell>
-        })}
-        <BackTop
-          threshold={200}
-          style={{
-            bottom: '50px',
-            insetInlineEnd: '20px',
-          }}
-          onClick={handleClick}
-        >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <Top size={12} />
-            <div style={{ fontSize: '12px' }}>{translated.backText}</div>
-          </div>
-        </BackTop>
+        <Demo1 />
       </div>
     </>
   )

src/packages/backtop/demo.tsx

@@ -1,42 +1,20 @@
 import React from 'react'
-import { Top } from '@nutui/icons-react'
-import { BackTop } from './backtop'
 import { useTranslate } from '../../sites/assets/locale'
-import Cell from '../cell'
-
-interface T {
-  title: string
-  clg: string
-  backText: string
-  content: string
-}
+import Demo1 from './demos/h5/demo1'
 
 const BackTopDemo = () => {
-  const [translated] = useTranslate<T>({
+  const [translated] = useTranslate({
     'zh-CN': {
       title: '基础用法',
-      clg: '触发返回顶部',
-      content: '我是测试数据',
-      backText: '顶部',
     },
     'en-US': {
       title: 'Basic Usage',
-      clg: 'backtop',
-      content: 'test data',
-      backText: 'Top',
     },
     'zh-TW': {
       title: '基礎用法',
-      clg: '觸發返回頂部',
-      content: '我是測試數據',
-      backText: '頂部',
     },
   })
 
-  const handleClick = () => {
-    console.log(translated.clg)
-  }
-
   return (
     <>
       <div
@@ -45,29 +23,7 @@ const BackTopDemo = () => {
         id="target"
       >
         <h2>{translated.title}</h2>
-        {new Array(24).fill(0).map((_, index) => {
-          return <Cell key={index}>{translated.content + index}</Cell>
-        })}
-        <BackTop
-          threshold={200}
-          style={{
-            bottom: '50px',
-            insetInlineEnd: '20px',
-          }}
-          onClick={handleClick}
-          target="target"
-        >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <Top width={12} height={12} />
-            <div style={{ fontSize: '12px' }}>{translated.backText}</div>
-          </div>
-        </BackTop>
+        <Demo1 />
       </div>
     </>
   )

src/packages/backtop/demos/h5/demo1.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { BackTop, Cell } from '@nutui/nutui-react'
+
+const Demo1 = () => {
+  return (
+    <div id="target" style={{ height: '100vh' }}>
+      {new Array(24).fill(0).map((_, index) => {
+        return <Cell key={index}>我是测试数据{index}</Cell>
+      })}
+      <BackTop target="target" />
+    </div>
+  )
+}
+export default Demo1

src/packages/backtop/demos/h5/demo2.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { BackTop, Cell } from '@nutui/nutui-react'
+
+const Demo2 = () => {
+  return (
+    <div id="target" style={{ height: '100vh' }}>
+      {new Array(24).fill(0).map((_, index) => {
+        return <Cell key={index}>我是测试数据{index}</Cell>
+      })}
+      <BackTop target="target" threshold={200} />
+    </div>
+  )
+}
+export default Demo2

src/packages/backtop/demos/h5/demo3.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Top } from '@nutui/icons-react'
+import { BackTop, Cell } from '@nutui/nutui-react'
+
+const Demo3 = () => {
+  return (
+    <div id="target" style={{ height: '100vh' }}>
+      {new Array(24).fill(0).map((_, index) => {
+        return <Cell key={index}>我是测试数据{index}</Cell>
+      })}
+      <BackTop threshold={100}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Top width={12} height={12} />
+          <div style={{ fontSize: '12px' }}>顶部</div>
+        </div>
+      </BackTop>
+    </div>
+  )
+}
+export default Demo3

src/packages/backtop/demos/h5/demo4.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { BackTop, Cell } from '@nutui/nutui-react'
+
+const Demo4 = () => {
+  return (
+    <div id="target" style={{ height: '800px', overflowY: 'auto' }}>
+      {new Array(24).fill(0).map((_, index) => {
+        return <Cell key={index}>我是测试数据{index}</Cell>
+      })}
+      <BackTop target="target" threshold={100} />
+    </div>
+  )
+}
+export default Demo4

src/packages/backtop/demos/h5/demo5.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { BackTop, Cell } from '@nutui/nutui-react'
+import { Top } from '@nutui/icons-react'
+
+const Demo5 = () => {
+  const handleClick = () => {
+    console.log('触发返回顶部')
+  }
+  return (
+    <div style={{ height: '100vh', overflowY: 'auto' }} 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}
+        target="target"
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Top width={12} height={12} />
+          <div style={{ fontSize: '12px' }}>顶部</div>
+        </div>
+      </BackTop>
+    </div>
+  )
+}
+export default Demo5

src/packages/backtop/demos/taro/demo1.tsx

@@ -0,0 +1,32 @@
+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>
+  )
+}
+export default Demo1

src/packages/backtop/demos/taro/demo2.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+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

src/packages/backtop/demos/taro/demo3.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Top } from '@nutui/icons-react-taro'
+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}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Top size={12} />
+          <div style={{ fontSize: '12px' }}>顶部</div>
+        </div>
+      </BackTop>
+    </div>
+  )
+}
+export default Demo3

src/packages/backtop/demos/taro/demo4.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { BackTop, Cell } from '@nutui/nutui-react-taro'
+import { Top } from '@nutui/icons-react-taro'
+
+const Demo4 = () => {
+  const handleClick = () => {
+    console.log('触发返回顶部')
+  }
+  const demoStyle = {
+    height: 'auto',
+    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>
+  )
+}
+export default Demo4