UniApp中实现底部返回顶部功能

在UniApp中，实现返回页面顶部的功能是一个常见的需求，尤其是在长页面中，用户滚动浏览后需要快速回到页面顶部。这可以通过监听页面滚动事件并使用uni.pageScrollTo方法来实现。

实现方法

首先，在页面的<template>部分，添加一个用于返回顶部的按钮，该按钮通过v-if指令绑定一个变量isShow来控制显示和隐藏。当页面滚动到一定距离时，显示这个按钮，用户点击后可以回到页面顶部。

<template>
<view class="content">

<view class="upward" v-if="isShow" @click="Totop">
<u-icon name="arrow-upward" color="#434343" size="28"></u-icon>
</view>
</view>
</template>
在<script>部分，定义isShow变量，并在data函数中初始化为false。然后，使用onPageScroll函数监听页面滚动事件，当页面滚动超过200px时，设置isShow为true，显示返回顶部按钮。

<script>
export default {
data() {
return {
isShow: false,
}
},
onPageScroll(e) {
if (e.scrollTop > 200) {
this.isShow = true;
} else {
this.isShow = false;
}
},
methods: {
Totop() {
uni.pageScrollTo({
scrollTop: 0, // 滚动到页面的目标位置
duration: 300 // 滚动动画的时长
});
}
}
}
</script>
在<style>部分，可以添加CSS样式来美化返回顶部按钮的外观。

<style>
.content {
/* 页面内容样式 */
}
.upward {
width: 70rpx;
height: 70rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
border: 3rpx solid #d0d0d0;
margin-bottom: 20rpx;
background-color: rgba(255, 255, 255, 0.4);
position: fixed;
bottom: 300rpx;
right: 30rpx;
}
</style>
使用uView组件

如果项目中使用了uView UI框架，可以直接使用u-back-top组件来实现返回顶部的功能。在页面中引入u-back-top组件，并通过scroll-top属性绑定页面滚动的距离。

<template>
<view class="wrap">

<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 scoped>
.wrap {
height: 200vh;
}
</style>
在这种方法中，u-back-top组件会自动监听页面滚动，并在适当的时候显示返回顶部的按钮。