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;
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值