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-view
      scroll-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 = true
      try {
        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 + 1
          const endIndex = page * 5
          const mockData = Array(5).fill().map((_, i) => `第${page}页-条目${startIndex + i}`)
          resolve(mockData)
        }, 800) // 模拟网络延迟
      })
    },
    // 可选：下拉刷新重置数据
    onPullDownRefresh() {
      this.page = 1
      this.listData = []
      this.hasMore = true
      this.getListData()
      uni.stopPullDownRefresh() // 停止刷新动画
    },
    getListData() {
      this.fetchData({ page: this.page }).then(data => {
        this.listData = data
        this.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;
}