返回顶部 BackTop

返回页面顶部的操作按钮，当页面过长用户需要返回页面顶部的时候使用；

使用

API

安装使用

import { BackTop } from '@titian-design/mobile-react';

基本用法

基本使用

codesanbox

copy

code

import React, { useRef } from 'react';
import { TiBackTop, TiCellGroup, TiCell } from 'titian-h5-react';

export default function ButtonDefault() {
  const ref = useRef<HTMLDivElement>(null);

  return (
    <div
      className="content"
      style={{
        'width': '100%',
        '--back-top-bottom': '30px',
        '--back-top-right': '30px',
        'position': 'relative',
      }}
    >
      <div
        ref={ref}
        style={{
          height: 200,
          width: '100%',
          overflowY: 'auto',
        }}
      >
        <div
          style={{
            width: '100%',
          }}
        >
          <TiCellGroup>
            {Array(30)
              .fill(1)
              .map((_i, idx) => (
                <TiCell key={idx} title="向下滑动页面" />
              ))}
          </TiCellGroup>
        </div>
      </div>
      <div className="" style={{ transform: 'scale(1)', position: 'absolute', bottom: 0, right: 0 }}>
        <TiBackTop target={() => ref.current} />
      </div>
    </div>
  );
}

基本使用

codesanbox

copy

code

import React, { useRef } from 'react';
import { TiBackTop, TiCellGroup, TiCell } from 'titian-h5-react';

export default function ButtonDefault() {
  const ref = useRef<HTMLDivElement>(null);

  return (
    <div
      className="content"
      style={{
        'width': '100%',
        '--back-top-bottom': '30px',
        '--back-top-right': '30px',
        'position': 'relative',
      }}
    >
      <div
        ref={ref}
        style={{
          height: 200,
          width: '100%',
          overflowY: 'auto',
        }}
      >
        <div
          style={{
            width: '100%',
          }}
        >
          <TiCellGroup>
            {Array(30)
              .fill(1)
              .map((_i, idx) => (
                <TiCell key={idx} title="向下滑动页面" />
              ))}
          </TiCellGroup>
        </div>
      </div>
      <div className="" style={{ transform: 'scale(1)', position: 'absolute', bottom: 0, right: 0 }}>
        <TiBackTop text="顶部" target={() => ref.current} />
      </div>
    </div>
  );
}

简单使用

const App: React.FC = () => {
  return (
    <section style={{height: '200vh'}}>
      <TiBackTop />
    </section>
  )
}

使用时展示回到顶部文字

const App: React.FC = () => {
  return (
    <section style={{height: '200vh'}}>
      <TiBackTop text="顶部" />
    </section>
  )
} 

TiBackTop API

属性 Properties

名称	类型	必填	默认值	说明	备注
text	string	否	-	展示文字	-
visibilityHeight	number	否	400	滚动高度达到此参数值才出现 BackTop	-
scrollDuration	number	否	300	回到顶部所需时间（ms）	-
extStyle	string | Record<string, string>	否	-	根节点额外扩展样式	属性值如果是带单位的话，要带上单位，如：{margin: '10px'}
target	() => HTMLElement	否	-	设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数	-
icon	string | boolean	否 ｜ go-to-top	自定义图标，当为 false 时，不展示图标	-

事件 Events

名称	参数	说明	备注
onClick	(e: Event) => void	点击后的回调函数	-

可扩展样式名 External Class

类名	说明	备注
extClass	根节点可扩展的类名	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--back-top-z-index	10	-	-
--back-top-right	28px	-	-
--back-top-bottom	200px	-	-
--back-top-shadow	0 6px 20px 0 rgba(0, 0, 0, 0.06)	-	-
--back-top-bg-color	theme.color.gray.background.default	-	-
--back-top-width	96px	-	-
--back-top-height	96px	-	-
--back-top-border-radius	50%	-	-
--back-top-text-font-size	theme.fontSize.t2	文字大小	-
--back-top-text-color	theme.color.gray.texticon.900	文字颜色	-