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>
区块会固定显示在页面最底部,不会随页面滚动,同时添加的 下拉刷新也会失效,无法下拉刷新,导致页面顶部部分区域上拉上去之后,无法下来,被导航遮住;
在 uni-app
中,如果你在使用上拉加载更多(loadmore
)功能时,遇到了无更多数据时 loading
固定显示在屏幕最底部且内容部分上拉无法回弹的问题,可能是由于以下几个原因导致的:
1. loading
固定显示在屏幕最底部
通常,loading
提示应该随着页面内容滚动,而不是固定在屏幕底部。如果 loading
固定显示在屏幕底部,可能是因为 loading
组件的样式设置不当,或者 loading
组件被放置在了页面的固定位置。
解决方案:
确保 loading
组件是页面内容的一部分,而不是固定在页面的底部。你可以检查 loading
组件的样式,确保它没有使用 position: fixed
或 position: 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. 内容被导航遮住
如果内容部分上拉后被导航栏遮住,可能是因为页面的 padding
或 margin
设置不当,或者页面的高度计算有问题。
解决方案:
确保页面的 padding
或 margin
设置正确,并且页面的高度能够自适应内容。你可以通过设置 padding-top
或 margin-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();
}
};