2021-08-02

uni-app 点击按钮回到页面顶部

参考官方文档：https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto
父组件：

	<shopro-float-top :scrollTop="scrollTopCount"></shopro-float-top>

scrollTopCount: 0, //距离顶部距离
	onPageScroll(e) {
			this.scrollTopCount = e.scrollTop;
			this.isScorll = e.scrollTop > 100 ? true : false;
		},

子组件：

	<view v-if="scrollTop>400" class="backTop" :class="{'tophead':isShowToTop}" @click="toTopClick">
		<text class="clor"><!-- 顶部 --></text> 
	</view>

export default {
		name: "backTop",
		props: {
			id: {
				type: String,
				default: ''
			},
			scrollTop: {
				type: Number,
				default: 0
			},
			tab: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isShowToTop: true,
			}
		},
		methods: {
			toTopClick() {
				this.isShowToTop = false; // 回到顶部时按钮需要先隐藏,然后再执行回到顶部操作,避免闪动
				if (this.tab) {
					this.$emit('setScrollTop');
				} else {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 200
					});
				}
			}
		},
	}

.tophead {
		animation: mescrollFadeIn .3s ease forwards;
	}
	.clor {
		color: #fff;
		font-size: 32rpx;
	}
	.backTop {
		z-index: 999;
		position: fixed;
		right: 30rpx;
		bottom: 150rpx;
		/* #ifdef H5 */
		bottom: 288rpx;
		/* #endif */
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50%;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		background-image: url(https://food-static.woorifood.cn/uploads/20210724/FgB6C5W5T6ukiMCWk0fpDnlBvFny.png);
		background-size: 100% 100%;
		/* background-color: red; */
		/* background-color: rgba(0, 0, 0, .35); */
		text-align: center;
	}