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

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

项目属性 信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win0
HBuilderX类型 Alpha
HBuilderX版本 3.4.6
手机系统 Android
手机系统版本 Android 10
手机厂商 华为
手机机型 荣耀V10
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码:

<list ref="wflist" :show-scrollbar="false" class="page-productlist-waterfall " loadmoreoffset="600" @loadmore="loadmore" style="{height:mainH}">
    <refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
        <text class="pullingdown--loading"></text>
        <loading-indicator></loading-indicator>
    </refresh>
<cell>内容部分</cell>
<loading>
    <uni-load-more :status="loadingType"></uni-load-more>
</loading>
</list>

操作步骤:

  • 上拉页面触发loadmore,没有更多数据时,loading 固定显示在屏幕最底部,不会随页面滚动,内容部分上拉无法回弹,被导航遮住

预期结果:

  • loading区块应该跟随页面内容,随页面滚动;页面应该正常回弹

实际结果:

  • 上拉页面触发loadmore,没有更多数据时,loading 固定显示在屏幕最底部,不会随页面滚动,内容部分上拉无法回弹,被导航遮住

bug描述:

  • list或者waterfall中添加 <loading></loading> 时,当上拉触发加载更多到最后一页(没有更多数据时), <loading></loading> 区块会固定显示在页面最底部,不会随页面滚动,同时添加的 下拉刷新也会失效,无法下拉刷新,导致页面顶部部分区域上拉上去之后,无法下来,被导航遮住;
1 回复

uni-app 中,如果你在使用上拉加载更多(loadmore)功能时,遇到了无更多数据时 loading 固定显示在屏幕最底部且内容部分上拉无法回弹的问题,可能是由于以下几个原因导致的:

1. loading 固定显示在屏幕最底部

通常,loading 提示应该随着页面内容滚动,而不是固定在屏幕底部。如果 loading 固定显示在屏幕底部,可能是因为 loading 组件的样式设置不当,或者 loading 组件被放置在了页面的固定位置。

解决方案: 确保 loading 组件是页面内容的一部分,而不是固定在页面的底部。你可以检查 loading 组件的样式,确保它没有使用 position: fixedposition: absolute 等固定定位样式。

<view class="content">
  <!-- 页面内容 -->
  <view v-for="item in list" :key="item.id">{{ item.name }}</view>
  
  <!-- loading 提示 -->
  <view v-if="loading" class="loading">加载中...</view>
  
  <!-- 无更多数据提示 -->
  <view v-if="noMoreData" class="no-more">没有更多数据了</view>
</view>
.loading, .no-more {
  text-align: center;
  padding: 10px;
  color: #999;
}

2. 内容部分上拉无法回弹

如果内容部分上拉后无法回弹,可能是因为页面的滚动区域设置不当,或者页面的高度计算有问题。

解决方案: 确保页面的滚动区域设置正确,并且页面的高度能够自适应内容。你可以使用 scroll-view 组件来包裹页面内容,并设置 scroll-y 属性来启用垂直滚动。

<scroll-view scroll-y="true" style="height: 100vh;">
  <view class="content">
    <!-- 页面内容 -->
    <view v-for="item in list" :key="item.id">{{ item.name }}</view>
    
    <!-- loading 提示 -->
    <view v-if="loading" class="loading">加载中...</view>
    
    <!-- 无更多数据提示 -->
    <view v-if="noMoreData" class="no-more">没有更多数据了</view>
  </view>
</scroll-view>

3. 内容被导航遮住

如果内容部分上拉后被导航栏遮住,可能是因为页面的 paddingmargin 设置不当,或者页面的高度计算有问题。

解决方案: 确保页面的 paddingmargin 设置正确,并且页面的高度能够自适应内容。你可以通过设置 padding-topmargin-top 来为导航栏留出空间。

.content {
  padding-top: 50px; /* 根据导航栏高度调整 */
}

4. 使用 onReachBottom 事件

uni-app 中,通常使用 onReachBottom 事件来处理上拉加载更多的逻辑。确保你在 onReachBottom 事件中正确处理了加载更多的逻辑,并且在无更多数据时停止加载。

export default {
  data() {
    return {
      list: [],
      loading: false,
      noMoreData: false,
      page: 1
    };
  },
  methods: {
    loadMore() {
      if (this.noMoreData || this.loading) return;
      this.loading = true;
      
      // 模拟异步加载数据
      setTimeout(() => {
        const newData = this.getData(this.page);
        if (newData.length === 0) {
          this.noMoreData = true;
        } else {
          this.list = this.list.concat(newData);
          this.page++;
        }
        this.loading = false;
      }, 1000);
    },
    getData(page) {
      // 模拟获取数据
      return Array.from({ length: 10 }, (_, i) => ({ id: page * 10 + i, name: `Item ${page * 10 + i}` }));
    }
  },
  onReachBottom() {
    this.loadMore();
  }
};
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!