uniapp局部上拉加载数据

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

只有评论区可以上拉加载数据，网上找到了 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 false
	
		  setTimeout(() => {
			  this.doMessageReplyDetails()
		  }, 1000)
		}, // end loadMore
		// 获取回复详情
		doMessageReplyDetails() {
			const _this = this
			if (_this.pageInfo.prevPageNum === _this.pageInfo.pageNum) return false
			
			let opts={
				url: '/***',
				method: 'POST'
			}
			let param={
				id: Number.parseInt(this.commonInfo.id), // 此条留言的id-----必选
				page: this.pageInfo.pageNum,
				pageSize: this.pageInfo.pageSize,
			}
			_this.isScroll = false
			this.HTTP.httpFromDataRequest(opts, param).then(res => {
				if(res.data.success){
					const { data } = res.data
					
					if (data.list.length === 0) return false
					else {
						_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
			}
		},
	}