Backtop 回到顶部

当页面滚动超过指定距离时显示返回顶部按钮。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<template>
  <!-- 回到页面顶部 -->
  <fui-backtop :scrollTop="scrollTop"></fui-backtop>
</template>

<script>
export default {
  data() {
    return {
      // 当前页面滚动距离，单位 px
      scrollTop: 0
    };
  },
  /** 同步页面滚动距离 */
  onPageScroll(event) {
    this.scrollTop = event.scrollTop;
  }
};
</script>

属性

属性	类型	说明	官网默认值
scrollTop	Number、String	页面滚动距离，单位 px；页面滚动时需同步	空
targetRef	String	nvue 中需要滚动到的目标引用	空
threshold	Number、String	显示按钮所需的滚动距离，单位 px	320
width	Number、String	按钮宽高，单位 rpx	80
bottom	Number、String	按钮距底部的距离，单位 rpx	160
right	Number、String	按钮距右侧的距离，单位 rpx	40
background	String	按钮背景色	#FFFFFF
name	String	内置图标名称	top
color	String	内置图标颜色	#333333
custom	Boolean	是否自定义图标内容	false

事件

事件	说明	回调参数
click	点击回到顶部按钮	{}

平台及版本说明

普通页面使用 uni.pageScrollTo；nvue 需要传入目标节点引用。本地源码允许 targetRef 为对象，官网参数表将其标记为 String，具体请结合目标平台测试。若项目未使用 easycom，需要按项目方式注册 fui-icon。

插槽

插槽	说明
default	自定义回到顶部按钮内容