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

<script>
export default {
	data() {
		return {
			scrollTop: 0
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

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

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

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

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

通过icon修改返回顶部按钮的图标，可以是uView内置的图标，或者图片路径
通过text参数修改返回顶部按钮的文字提示信息，如果需要修改文字的颜色和大小，可以通过customStyle参数

<u-back-top :scroll-top="scrollTop" icon="arrow-up" text="返回"></u-back-top>

其他自定义样式

通过iconStyle参数自定义图标的样式，比如颜色，大小等
通过customStyle修改返回按钮的背景颜色，大小等
通过mode修改按钮的形状，circle为圆形，square为方形
注意：如果通过icon参数传入图片路径的话，需要通过iconStyle参数设置图片的width和height属性

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

<script>
export default {
	data() {
		return {
			scrollTop: 0,
			mode: 'square',
			iconStyle: {
				fontSize: '32rpx',
				color: '#2979ff'
			}
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

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

Props

参数 说明 类型 默认值 可选值
mode 按钮形状 String circle square
icon uView内置图标名称，或图片路径 String arrow-upward -
text 返回顶部按钮的提示文字 String - -
duration 返回顶部过程中的过渡时间，单位ms String | Number 100 -
scrollTop 页面的滚动距离，通过onPageScroll生命周期获取 String | Number 0 -
top 滚动条滑动多少距离时显示，单位rpx String | Number 400 -
bottom 返回按钮位置到屏幕底部的距离，单位rpx String | Number 100 -
right 返回按钮位置到屏幕右边的距离，单位rpx String | Number 20 -
z-index 返回顶部按钮的层级 String | Number 9 -
iconStyle 图标的样式，对象形式 Object - -
customStyle 按钮外层的自定义样式 Object - -

Slot

名称 说明

• 自定义返回按钮的所有内容