uni-app 实现回到顶部功能

在 uni-app 中实现回到顶部功能，可以通过监听页面滚动事件，并在需要时设置页面的滚动位置来实现。以下是一个简单的代码示例，展示了如何在 uni-app 中实现这一功能。

首先，在你的页面组件（如 pages/index/index.vue）中，添加以下代码：

<template>
  <view class="container">
    <view class="content" :style="{ height: contentHeight + 'px' }">
      <!-- 页面内容 -->
      <text v-for="n in 100" :key="n">内容 {{ n }}</text>
    </view>
    <button @click="scrollToTop">回到顶部</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contentHeight: 1500, // 假设内容高度为1500px，实际可根据需求调整
      scrollTop: 0, // 记录当前滚动位置
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop; // 更新当前滚动位置
  },
  methods: {
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0, // 滚动到顶部
        duration: 300, // 滚动动画持续时间，单位为ms
      });
    },
  },
  onLoad() {
    // 监听页面滚动事件
    this.$mp.page.onScroll(this.onPageScroll);
  },
  onUnload() {
    // 页面卸载时取消监听
    this.$mp.page.offScroll(this.onPageScroll);
  },
};
</script>

<style>
.container {
  position: relative;
  padding-bottom: 50px; /* 确保按钮不会被内容覆盖 */
}
.content {
  overflow-y: auto; /* 允许内容垂直滚动 */
}
button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>

在这个示例中，我们做了以下几件事：

1. 在模板中添加了一个按钮，用于触发回到顶部的功能。
2. 在 data 中定义了一个 contentHeight 变量来模拟内容高度，以及一个 scrollTop 变量来记录当前滚动位置。
3. 使用 onPageScroll 方法监听页面滚动事件，并更新 scrollTop。
4. 在 methods 中定义了一个 scrollToTop 方法，使用 uni.pageScrollTo API 将页面滚动到顶部。
5. 在 onLoad 生命周期钩子中监听页面滚动事件，在 onUnload 生命周期钩子中取消监听。

这样，当用户点击“回到顶部”按钮时，页面就会平滑地滚动到顶部。你可以根据需要调整内容高度和按钮样式。