uniapp 监听滚动

### 如何在 UniApp 中监听页面或元素的滚动事件

#### 页面级别监听滚动事件

`onPageScroll` 是 uni-app 特有的页面生命周期函数，用于监听页面级别的滚动事件。此方法仅适用于页面级 `.vue` 文件，在 `<scroll-view>` 组件内部使用 `onPageScroll` 将不会生效。

export default {
  onPageScroll(e) {
    // scrollTop 表示当前页面垂直方向滚动的距离
    console.log('页面滚动距离:', e.scrollTop);
    
    // 根据滚动距离判断是否显示回到顶部按钮
    if (e.scrollTop > 224) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  },
  
  data() {
    return {
      isShow: false, // 控制回到顶部按钮的显隐状态
    };
  }
}

#### 使用组件事件监听滚动

对于带有滚动功能的组件（如 `scroll-view`），应采用该组件自带的滚动事件监听器而非全局的 `onPageScroll` 函数。下面是一个简单的例子展示如何利用 `@scroll` 属性来捕获并响应 `scroll-view` 的滚动行为：

<template>
  <view class="container">
    <!-- 设置可滚动区域 -->
    <scroll-view scroll-y="true" @scroll="handleScrollViewScroll" :style="{ height: '100vh' }">
      <!-- 这里放置需要滚动的内容 -->
    </scroll-view>

    <!-- 返回顶部按钮 -->
    <button v-if="isShowBackTopButton" @click="backToTop">返回顶部</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleScrollViewScroll(event) {
      const { scrollTop } = event.detail;

      // 打印滚动位置信息
      console.log(`滚动到 ${scrollTop}px`);

      // 更新数据绑定变量以控制UI变化
      this.$data.scrollTopValue = scrollTop;

      // 显示/隐藏返回顶部按钮逻辑
      this.$data.isShowBackTopButton = scrollTop >= 600 ? true : false;
    },

    backToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    }
  },

  data() {
    return {
      scrollTopValue: 0,
      isShowBackTopButton: false
    };
  }
};
</script>