BackTop 返回顶部

BackTop 返回顶部 1.3.0 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

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

<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>

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

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

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

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

• 通过icon修改返回顶部按钮的图标，可以是uView内置的图标，或者图片路径(需要1.3.0及以上版本)
• 通过tips参数修改返回顶部按钮的文字提示信息，如果需要修改文字的颜色和大小，可以通过custom-style参数

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

其他自定义样式

• 通过icon-style参数自定义图标的样式，比如颜色，大小等
• 通过custom-style修改返回按钮的背景颜色，大小等
• 通过mode修改按钮的形状，circle为圆形，square为方形

注意：如果通过icon参数传入图片路径的话，需要通过custom-style参数设置图片的width和height属性

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

API

Props

Slot