uni-app回到顶部功能(组件)

图示

在components文件夹下新建back-top/back-top.vue,写入以下代码

<template>
	<view v-if="scrollTop>400" class="backTop" :class="{'mescroll-fade-in':isShowToTop}" @click="toTopClick">
		<text class="iconfont iconjiantou4" style="color: #fff;font-size:40rpx"></text>  <!-- 此处为iconfont图标,可根据自己项目设置 -->
	</view>
</template>

<script>
	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
					});
				}


			}
		},

	}
</script>

<style>
	.mescroll-lazy-in,
	.mescroll-fade-in {
		-webkit-animation: mescrollFadeIn .3s ease forwards;
		animation: mescrollFadeIn .3s ease forwards;
	}

	.backTop {
		z-index: 999;
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		/* #ifdef H5 */
		bottom: 220rpx;
		/* #endif */
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50%;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		background-color: rgba(0,0,0,.35);
		text-align: center;
	}
</style>

在main.js中引入back-top组件

import backTop from '@/components/back-top/back-top.vue';
Vue.component('back-top',backTop)

在页面中使用

<template>
	<view class="container">
		<view class="list-content">
			<back-top :scrollTop="scrollTopCount"></back-top>  <!-- 1、组件部分 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTopCount:0,  //2、距离顶部距离
			};
		},
		
		//3、监听滚动
		onPageScroll(e) {
			this.scrollTopCount = e.scrollTop;
		},
	}
</script>

注:以上功能实现基于插件: https://ext.dcloud.net.cn/plugin?id=1181

posted @   huihuihero  阅读(3223)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天:
2019-09-09 vue移动端项目经验
2019-09-09 文字溢出时省略号表示
点击右上角即可分享
微信分享提示