BackTop 回到顶部

介绍

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

基础用法

搭配 scroller 或 scrollbar 组件使用，在页面滚动超过一定距离后显示，点击后可返回滚动条顶部。

<vd-scroller scroll-y>
  <view class="content">
    ...
  </view>

  <vd-back-top />
</vd-scroller>

指定滚动条

通过 scroller 属性指定要监听的滚动条。

<vd-scroller name="page" scroll-y>
  <view class="content">
   ...
  </view>
</vd-scroller>

<vd-back-top scroller="page" />

滚动检测方向

通过 direction 属性指定滚动检测方向，可选值为 up down。

<vd-scroller name="page" scroll-y>
  <view class="content">
  ...
  </view>
</vd-scroller>
<vd-back-top scroller="page" direction="down" />

自定义位置

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

<vd-scroller name="page" scroll-y>
  <view class="content">
  ...
  </view>
</vd-scroller>
<vd-back-top scroller="page" right="10vw" bottom="10vh" />

API

Props

参数	说明	类型	默认值
size	尺寸大小	string | number	52
color	颜色	string	-
right	距离右侧的距离	string | number	30
bottom	距离底部的距离	string | number	60
offset	滚动高度超过该偏移量阈值时展示	string | number	200
direction	滚动检测方向	'up' | 'down'	'up'
scroller	监听滚动事件的滚动条节点名称	string	-
z-index	层级	string | number	9

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Slots

名称	说明
default	自定义内容