Tantalum UI

BackTop 返回顶部 

import { TaBackTop, TaGroup } from '@/index'

export default function ExpBackTop() {
  return (
    <>
      <TaGroup title="基础用法">
        <ul className="exp-backTop-box">
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
          <li>Scroll to bottom 往下滑</li>
        </ul>
      </TaGroup>
      <TaBackTop />
      <TaBackTop offset={[0, -50]}>UP</TaBackTop>
    </>
  )
}

Import 

import { TaBackTop } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
visible-heightnumber200否滚动高度达到此参数值才出现
animatedbooleantrue否是否需要动画
offsetnumber[][0, 0]否偏移量，格式为 [x, y]
enableSafeAreaInsetsbooleantrue否是否开启安全区适配

注：

在 iPhoneX 等机型开启 enableSafeAreaInsets，需要在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

Events

事件描述回调函数参数
onClick回到顶部按钮点击时触发e: Event

Slots

点击区域 children 

<TaBackTop>回顶部</TaBackTop>

children 的缺省内容

默认显示 图标。