uni-app中返回顶部的方法

1、可以利用 uni-app 提供的 scroll-view 并且允许纵向滚动

（1）uni-app 文档
https://uniapp.dcloud.net.cn/component/scroll-view.html
（2）需要把写的内容用 包起来。

<template>
	<scroll-view :scroll-into-view="topItem" scroll-with-animation scroll-y="true" class="scroll-cont my-home"
		@scroll="handleScroll">
		<view class="home">
			<view>// 比如想返回至这个位置(位置自己定)，那么只需要写一个空的标签(记得带id名字)view>
			<view id="topPosition">view>
			<view v-for="(item, index) in Array(70)" :key="index">
				{{ index+1 }}、你的内容
			view>
			<view>// 这个是你要点击的按钮view>
			<view class="back-top" v-if="isShow" @click="handleBackTop">
				<icon type="download" :size="36">icon>
			view>
		view>
	scroll-view>
template>

<script>
	export default {
		data() {
			return {
				// 返回的按钮是否显示
				isShow: false,
				// 返回顶部的标记点
				topItem: '',
			}
		},
		methods: {
			handleScroll(e) {
				// 只有scrollTop有用，先拿scrollTop
				let scrollTop = e.detail.scrollTop
				// 滑动大于500让按钮显示
				this.isShow = scrollTop > 500
				// 因为点第二次不行，这里记得重置清空一下
				this.topItem = ''
			},
			handleBackTop() {
				this.topItem = 'topPosition'
			}
		}
	}
script>

<style>
	.my-home {
		padding: 36rpx;
	}

	.scroll-cont {
		height: 100vh;
	}

	.back-top {
		background-color: #ffffff;
		position: fixed;
		bottom: 40rpx;
		right: 24rpx;
	}

	.back-top icon {
		display: block;
		transform: rotate(180deg);
	}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65