BackTop 回到顶部

介绍

返回页面顶部的操作按钮。

请升级 taroify 到 >= 0.1.0-alpha.4 版本来使用该组件。

引入

import { BackTop } from "@taroify/core"

代码演示

基础用法

请滚动右侧的示例页面，当页面滚动 200px 时，右下角会出现返回顶部按钮。

const list = [...Array(50).keys()]
;<View>
  <Cell.Group>
    {arr.map((v) => {
      return <Cell key={v}>{v}</Cell>
    })}
  </Cell.Group>
  <BackTop />
</View>

自定义位置

通过 right 和 bottom 属性来设置组件距离右侧和底部的位置。

function CustomContent) {
  const list = [...Array(50).keys()];

  return (
    <View>
      <Cell.Group>
        {list.map((v) => {
          return (
            <Cell key={v}>{v}</Cell>
          )
        })}
      </Cell.Group>
      <BackTop />
    </View>
  )
}

自定义内容

使用 children 来自定义组件展示的内容。

function CustomContent() {
  const list = [...Array(50).keys()]

  return (
    <View>
      <Cell.Group>
        {list.map((v) => {
          return <Cell key={v}>{v}</Cell>
        })}
      </Cell.Group>
      <BackTop>返回顶部</BackTop>
    </View>
  )
}

.custom-back-top {
  width: 160px;
  font-size: 28px;
  text-align: center;
}

瞬间滚动

当设置 immediate 属性后，页面滚动的过程不再有过渡效果，而是瞬间滚动到顶部。

function SetImmediate() {
  const list = [...Array(50).keys()]

  return (
    <View>
      <Cell.Group>
        {list.map((v) => {
          return <Cell key={v}>{v}</Cell>
        })}
      </Cell.Group>
      <BackTop immediate />
    </View>
  )
}

API

Props

参数	说明	类型	默认值
right	距离页面右侧的距离，默认单位为 `px`	number \| string	`30`
bottom	距离页面底部的距离，默认单位为 `px`	number \| string	`40`
offset	滚动高度达到此参数值时才显示组件	number	`200`
immediate	是否瞬间滚动到顶部	boolean	`false`
zIndex	设置组件的 z-index 层级	number	`100`

Event

事件	说明	回调参数
onClick	点击组件时触发	event:ITouchEvent

注意

非 H5 项目需要显式调用 onClick

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--back-top-size	80px	-
--back-top-icon-size	40px	-
--back-top-right	60px	-
--back-top-bottom	80px	-
--back-top-z-index	100	-
--back-top-text-color	#fff	-
--back-top-background	var(--blue, $blue)	-

#BackTop 回到顶部

#介绍

#引入

#代码演示

#基础用法

#自定义位置

#自定义内容

#瞬间滚动

#API

#Props

#Event

#注意

#主题定制

#样式变量