Tantalum UI

Appearance

Return to top
On this page

BackTop 返回顶部

vue
<template>
  <ta-group title="基础用法">
    <ul class="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>
  </ta-group>
  <ta-back-top></ta-back-top>
  <ta-back-top :offset="[0, -50]">UP</ta-back-top>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ExpBackTop'
})
</script>

Import

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

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

Props

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

注：

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

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

Events

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

Slots

点击区域（#default）

vue
<ta-back-top>
  回顶部
</ta-back-top>

default 的缺省内容

默认显示 图标。