uni-app页面加了page-meta组件后，scroll-view组件的事件（比如@scroll、@loadMore）不触发

回复 1***@qq.com: 我这边试过 是正常的，scroll-view 为 100% ，无法触发，官网对于scroll-view的这一块有说明的，竖向滚动时必须指定高度

在 uni-app 中，page-meta 组件用于设置页面的元信息，如标题、背景色等。然而，当你在页面中使用了 page-meta 组件后，可能会导致 scroll-view 组件的事件（如 [@scroll](/user/scroll)、@loadMore）无法触发。这通常是因为 page-meta 组件会改变页面的结构或行为，从而影响了 scroll-view 的正常工作。

以下是一些可能的解决方案：

1. 检查 page-meta 的位置

确保 page-meta 组件放置在页面的最外层，通常是 <template> 标签内的第一个元素。page-meta 应该放在 scroll-view 组件之前。

<template>
  <page-meta :page-style="pageStyle"></page-meta>
  <scroll-view [@scroll](/user/scroll)="onScroll" @scrolltolower="onLoadMore">
    <!-- 内容 -->
  </scroll-view>
</template>

2. 使用 page-style 替代 page-meta

如果你只是需要设置页面的样式（如背景色、字体大小等），可以考虑使用 page-style 而不是 page-meta。page-style 不会改变页面的结构，因此不会影响 scroll-view 的事件触发。

<template>
  <view :style="pageStyle">
    <scroll-view [@scroll](/user/scroll)="onScroll" @scrolltolower="onLoadMore">
      <!-- 内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageStyle: {
        'background-color': '#f8f8f8',
        'font-size': '16px'
      }
    };
  }
};
</script>

3. 检查 scroll-view 的高度

确保 scroll-view 组件设置了正确的高度。如果 scroll-view 的高度没有设置或设置不正确，可能会导致滚动事件无法触发。

<template>
  <scroll-view style="height: 100vh;" [@scroll](/user/scroll)="onScroll" @scrolltolower="onLoadMore">
    <!-- 内容 -->
  </scroll-view>
</template>

4. 使用 onReachBottom 代替 @scrolltolower

如果你需要实现上拉加载更多的功能，可以考虑使用 onReachBottom 页面生命周期函数，而不是 @scrolltolower 事件。

<script>
export default {
  methods: {
    onReachBottom() {
      // 加载更多逻辑
    }
  }
};
</script>

5. 检查是否有其他样式或组件影响了 scroll-view

确保没有其他样式或组件影响了 scroll-view 的行为。例如，某些父容器的 overflow 属性可能会影响 scroll-view 的滚动。

6. 使用 scroll-view 的 scroll-top 属性

如果你需要手动控制 scroll-view 的滚动位置，可以使用 scroll-top 属性。

<template>
  <scroll-view :scroll-top="scrollTop" [@scroll](/user/scroll)="onScroll">
    <!-- 内容 -->
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0
    };
  },
  methods: {
    onScroll(event) {
      this.scrollTop = event.detail.scrollTop;
    }
  }
};
</script>