小程序

---

配置

{"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;
}