uniapp的上拉加载H5和小程序

小程序

配置

{"path": "list/course-list","style": {"navigationBarTitleText": "课程列表","enablePullDownRefresh": true,"onReachBottomDistance": 150}}

上拉拉触底钩子

onReachBottom() {var that = this;if (that.groupPage * that.showNo - that.groupTotal < 0) {setTimeout(function () {that.groupPage += 1;that.getCommodityList();//请求下页数据}, 200);} else {this.isfinish = true;console.log("数据已经加载完成")}},

data值

data() {return {imgBaseWebUrl: this.$imgBaseWebUrl,serverFileUrl: app.globalData.ossFileServer,loading: '加载中',shopList: [],flowList: [],leftList: [],dictClassifyId: "",searchText: '',//搜索关键字groupPage: 1, //列表部分当前页码groupTotal: 0, //列表部分总页码showNo: 10,//每页显示条数isfinish: false,//列表数据是否加载完成reqIng: true,//数据请求中};

getCommodityList请求数据：

//获取所有商品getCommodityList: function () {let that = this;let url = "/classSchedule/page";that.reqIng = true;that.isfinish = false;let params;if(this.searchText){params={page: that.groupPage,title:this.searchText}}else{params={page: that.groupPage}}// console.log("当前请求页码", that.groupPage)this.$http.post(url, params).then((res) => {uni.hideLoading();console.log('后端', res);if (res.code == 200) {that.flowList=res.rows;console.log('取到的数据', that.flowList)if (that.showNo >= res.total) {//只有一页数据that.isfinish = true;}} else {uni.showToast({title: res.message,icon: "none",});}that.reqIng = false;}).catch((i) => {}).finally(() => {uni.hideLoading();});},

H5

view

<template><view class="container"><!-- 可滚动视图 --><scroll-viewscroll-y:style="{ height: windowHeight + 'px' }"@scrolltolower="loadMore"><!-- 数据列表 --><view v-for="(item, index) in listData" :key="index" class="item">{{ item }}</view><!-- 加载状态提示 --><view v-if="isLoadingMore" class="loading">加载中...</view><view v-if="hasMore === false" class="no-more">没有更多了</view></scroll-view></view>
</template>

js

export default {data() {return {listData: [],           // 存储列表数据page: 1,                // 当前页码isLoadingMore: false,   // 是否正在加载中hasMore: true,          // 是否还有更多数据windowHeight: uni.getSystemInfoSync().windowHeight // 屏幕高度}},created() {this.getListData() // 初始化加载第一页数据},methods: {// 🔥 核心：加载更多数据async loadMore() {if (!this.hasMore || this.isLoadingMore) return // 防抖：避免重复请求this.isLoadingMore = truetry {const newData = await this.fetchData({ page: this.page + 1 })if (newData.length > 0) {this.listData = [...this.listData, ...newData]this.page++} else {this.hasMore = false // 无更多数据}} catch (error) {console.error('加载失败:', error)uni.showToast({ title: '加载失败', icon: 'none' })} finally {this.isLoadingMore = false}},// 模拟API请求（实际替换为你的接口）fetchData({ page }) {return new Promise(resolve => {setTimeout(() => {// 模拟分页数据（每页5条）const startIndex = (page - 1) * 5 + 1const endIndex = page * 5const mockData = Array(5).fill().map((_, i) => `第${page}页-条目${startIndex + i}`)resolve(mockData)}, 800) // 模拟网络延迟})},// 可选：下拉刷新重置数据onPullDownRefresh() {this.page = 1this.listData = []this.hasMore = truethis.getListData()uni.stopPullDownRefresh() // 停止刷新动画},getListData() {this.fetchData({ page: this.page }).then(data => {this.listData = datathis.page++})}}
}

css

.container {width: 100%;height: 100vh;
}
.item {padding: 20rpx;border-bottom: 1px solid #f0f0f0;text-align: center;
}
.loading {text-align: center;padding: 20rpx;color: #999;
}
.no-more {text-align: center;padding: 20rpx;color: #ccc;font-size: 28rpx;
}