uni-app 上拉页面触发loadmore时，若没有更多数据，loading固定显示在屏幕最底部不随页面滚动，内容部分上拉无法回弹，被顶部元素遮住

在 uni-app 中，当你在上拉加载更多数据时，如果没有更多数据，通常需要处理 loading 状态的显示以及页面的滚动行为。你描述的问题可能是由于 loading 状态的处理不当或页面的布局问题导致的。以下是一些可能的解决方案：

1. 使用 uni-load-more 组件

uni-app 提供了 uni-load-more 组件，可以方便地处理上拉加载更多的状态。你可以根据是否有更多数据来显示不同的状态。

<template>
  <view>
    <scroll-view
      scroll-y="true"
      @scrolltolower="loadMore"
      style="height: 100vh;"
    >
      <!-- 页面内容 -->
      <view v-for="item in list" :key="item.id">{{ item.text }}</view>

      <!-- 加载更多组件 -->
      <uni-load-more :status="loadingStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      loadingStatus: 'more', // 加载状态，可选值：more, loading, noMore
      page: 1, // 当前页码
      totalPages: 5 // 总页数
    };
  },
  methods: {
    loadMore() {
      if (this.page >= this.totalPages) {
        this.loadingStatus = 'noMore'; // 没有更多数据
        return;
      }

      this.loadingStatus = 'loading'; // 加载中

      // 模拟异步加载数据
      setTimeout(() => {
        this.page++;
        this.list.push(...this.getNewData()); // 添加新数据
        this.loadingStatus = 'more'; // 恢复加载更多状态
      }, 1000);
    },
    getNewData() {
      // 模拟生成新数据
      return Array.from({ length: 10 }, (_, i) => ({
        id: this.list.length + i + 1,
        text: `Item ${this.list.length + i + 1}`
      }));
    }
  }
};
</script>

2. 处理 loading 状态和页面滚动

如果 loading 状态显示在屏幕底部且不随页面滚动，可能是因为 loading 组件没有正确放置在 scroll-view 内部，或者 scroll-view 的高度设置不正确。

确保 loading 组件是 scroll-view 的子元素，并且 scroll-view 的高度设置为 100vh 或其他适当的值，以确保内容可以正常滚动。

3. 处理内容被顶部元素遮住的问题

如果内容部分上拉时被顶部元素遮住，可能是因为顶部元素的 position 设置为了 fixed 或 absolute，导致内容无法正常滚动到顶部。

你可以通过调整顶部元素的样式或使用 padding-top 来避免内容被遮住。

<template>
  <view>
    <view class="header">顶部元素</view>
    <scroll-view
      scroll-y="true"
      @scrolltolower="loadMore"
      style="height: calc(100vh - 50px);"
    >
      <!-- 页面内容 -->
      <view v-for="item in list" :key="item.id">{{ item.text }}</view>

      <!-- 加载更多组件 -->
      <uni-load-more :status="loadingStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<style>
.header {
  height: 50px;
  background-color: #f0f0f0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
</style>

4. 使用 page 样式

如果你使用的是 uni-app 的 page 样式，确保 page 样式没有设置 overflow: hidden，这可能会导致页面内容无法正常滚动。

page {
  overflow: auto;
}