uniapp局部上拉加载数据

淩亂°似流年 2021-09-03 04:29 876阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]

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

## 二、使用 ##

[官方示例][Link 1]

1、 npm 加载依赖

npm install vue-infinite-scroll --save

2、 单个页面引用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]

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
    			}
    		},
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/b4b7d961dc2f485e902440221d2624eb.png
[Link 1]: https://www.npmjs.com/package/vue-infinite-scroll
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/fac3b10fce5947449120f28ead9fe12b.png