Backtop 回到顶部

概述

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

支持平台

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

温馨提示

• 组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。

• Nvue端可与 list (opens new window)、waterfall (opens new window) 等专用组件结合使用获取scrollTop滚动距离，如果获取为负值，请转化为绝对值传入。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiBacktop from "@/components/firstui/fui-backtop/fui-backtop.vue"
export default {
	components:{
		fuiBacktop
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

通过 scrollTop 属性设置页面滚动条滚动距离，name 属性设置图标名称， background 属性设置背景色，color 属性设置图标颜色。

<fui-backtop :scrollTop="scrollTop" :name="name" :background="background" :color="color"></fui-backtop>

//scrollTop值获取，Nvue端可结合list、waterfall等组件使用获取
onPageScroll(e) {
	this.scrollTop = e.scrollTop
}

自定义图标

通过 custom 属性设置是否自定义图标，然后在组件内放置图标，scrollTop 属性设置页面滚动条滚动距离。

<fui-backtop custom :scrollTop="scrollTop">
	<fui-icon name="up" :size="52"></fui-icon>
</fui-backtop>

Slots

插槽名称	说明
default	自定义图标内容，需要将custom属性设为true

Props

属性名	类型	说明	默认值	平台差异说明
scrollTop	Number, String	滚动条滚动距离，如果为负数，传入绝对值，必选	-	非Nvue端在页面通过onPageScroll获取，Nvue端可结合list、waterfall使用获取
targetRef	String	要滚动到的那个节点，仅nvue使用，必选	-	仅Nvue端使用，传值如：this.$refs.targetRef[0]
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	图标名称，可选值：up，top，turningup，可参考fui-icon组件	top	-
color	String	图标颜色	#333333	-
custom	Boolean	是否自定义图标	false	原生微信小程序插槽不支持默认内容，抹平写法

Events

事件名	说明	回调参数
@click	点击回顶部按钮时触发	-

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)