uniapp局部上拉加载数据

article/2025/10/12 20:17:16

一、页面局部实现上拉加载数据

在这里插入图片描述

只有评论区可以上拉加载数据，网上找到了 vue-infinite-scroll

二、使用

官方示例

1、 npm 加载依赖

npm install vue-infinite-scroll --save

2、单个页面引用

在这里插入图片描述

import infiniteScroll from 'vue-infinite-scroll'export default {directives: { infiniteScroll },data() {return {isScroll: false, // 评论区滚动pageInfo: {pageSize: 5, // 每页显示条数pageNum: 1, // 当前页pageTotal: 1, // 总页数prevPageNum: 0,},}},methods: {loadMore: function() {if (!this.isScroll) return falsesetTimeout(() => {this.doMessageReplyDetails()}, 1000)}, // end loadMore// 获取回复详情doMessageReplyDetails() {const _this = thisif (_this.pageInfo.prevPageNum === _this.pageInfo.pageNum) return falselet opts={url: '/***',method: 'POST'}let param={id: Number.parseInt(this.commonInfo.id), // 此条留言的id-----必选page: this.pageInfo.pageNum,pageSize: this.pageInfo.pageSize,}_this.isScroll = falsethis.HTTP.httpFromDataRequest(opts, param).then(res => {if(res.data.success){const { data } = res.dataif (data.list.length === 0) return falseelse {_this.commonAreaInfo = [..._this.commonAreaInfo, ...data.list]}// 分页相关_this.replyTotal = data.total // 总评论数// 为判断是否还有数据，是否还需要上拉加载数据_this.pageInfo.prevPageNum = _this.pageInfo.pageNum_this.pageInfo.pageTotal = data.pages // 总页数_this.doScrollStatus() // 数据取完，判断是否需要加载数据}else{uni.showToast({title: res.data.message})}},error => {console.log(error);})},doScrollStatus() {if (this.pageInfo.pageNum === this.pageInfo.pageTotal) {this.isScroll = false} else {this.pageInfo.pageNum++this.isScroll = true}},}