该组件一个用于长页面，滑动一定距离后，出现返回顶部按钮，方便快速返回顶部的场景。

基本使用

由于返回顶部需要实时监听滚动条的位置，从而判断返回的按钮该出现还是隐藏，由于组件无法得知页面的滚动条信息，只能在页面的onPageScroll生命周期 中获得滚动条的位置，故需要在页面监听onPageScroll生命周期，实时获得滚动条的位置，通过Props传递给组件。

<template>
	<un-back-top :scroll-top="scrollTop"></un-back-top>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//#ifndef UNI-APP-X
import { onPageScroll } from '@dcloudio/uni-app'
// #endif

const scrollTop = ref(0)

onPageScroll((e) => {
	scrollTop.value = e.scrollTop
})
</script>

改变返回顶部按钮的出现时机

可以通过top参数，修改页面滚动多少距离时，出现返回顶部的按钮

<template>
	<un-back-top :scroll-top="scrollTop" top="600"></un-back-top>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//#ifndef UNI-APP-X
import { onPageScroll } from '@dcloudio/uni-app'
// #endif

const scrollTop = ref(0)

onPageScroll((e) => {
	scrollTop.value = e.scrollTop
})
</script>

自定义返回顶部的图标和提示

• 通过icon修改返回顶部按钮的图标，可以是uView内置的图标，或者图片路径

<template>
	<un-back-top :scroll-top="scrollTop" icon="arrow-up"></un-back-top>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//#ifndef UNI-APP-X
import { onPageScroll } from '@dcloudio/uni-app'
// #endif

const scrollTop = ref(0)

onPageScroll((e) => {
	scrollTop.value = e.scrollTop
})
</script>

自定义按钮形状

• 通过shape修改按钮的形状，circle为圆形，square为方形
• 通过bgColor修改按钮的背景颜色

<template>
	<un-back-top 
		:scroll-top="scrollTop"
		bg-color="#2979ff"
		text-color="#ffffff"
		icon-color="#ffffff"
		shape="square" 
	></un-back-top>
</template>

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

const scrollTop = ref(0)

onPageScroll((e) => {
	scrollTop.value = e.scrollTop
})
</script>

自定义内容

通过插槽可以完全自定义返回按钮的内容

<template>
	<view class="wrap">
		<text>滑动页面，返回顶部按钮将出现在右下角</text>
		<un-back-top :scroll-top="scrollTop">
			<view class="custom-back-top">
				<text>TOP</text>
			</view>
		</un-back-top>
	</view>
</template>

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

const scrollTop = ref(0)

onPageScroll((e) => {
	scrollTop.value = e.scrollTop
})
</script>

<style lang="scss" scoped>
	.wrap {
		height: 200vh;
	}

	.custom-back-top {
		width: 48px;
		height: 48px;
		background-color: #2979ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: bold;
	}
</style>

API

Props

参数	说明	类型	默认值
mode	按钮形状（即将废弃）	Enum	null
shape	按钮形状	Enum	circle
icon	uView内置图标名称，或图片路径	String	backtop
text	返回顶部按钮的提示文字	String	返回
duration	返回顶部过程中的过渡时间，单位ms	String | Number	100
scrollTop	页面的滚动距离，通过onPageScroll生命周期获取	String | Number	0
top	滚动条滑动多少距离时显示，单位px	String | Number	400
bottom	返回按钮位置到屏幕底部的距离，单位px	String | Number	100
right	返回按钮位置到屏幕右边的距离，单位px	String | Number	20
width	返回按钮宽度，单位px	String | Number	48
height	返回按钮高度，单位px	String | Number	48
zIndex	返回顶部按钮的层级	String | Number	100
iconSize	图标大小	String | Number	19
iconColor	图标颜色	String	null
textSize	文字大小	String | Number	null
textColor	文字颜色	String	null
bgColor	按钮背景颜色	String	null
customStyle	按钮外层的自定义样式	String | Object	''

Events

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

Slot

名称	说明
-	自定义返回按钮的所有内容

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-back-top-bg-color	$bg-color	返回顶部按钮背景颜色
$un-back-top-text-font-size	$text-sm	返回顶部按钮文字大小
$un-back-top-text-color	$text-color	返回顶部按钮文字颜色