uni-app 下拉加载分页数据

迷南。 2022-10-29 03:26 486阅读 0赞

# uni-app 下拉加载分页数据 #

关于uni-app对页面数据量分页加载以及下拉刷新数据

--------------------

# uni-app小白一枚 #

此文章主要记录uni-app学习中感觉有意思的知识点

--------------------

提示：以下是本篇文章正文内容，下面案例可供参考

# 一、关于数据量多时下拉加载更多数据操作 #

代码如下（示例）：

## 1.代码片段 ##

此处是循环获取的数据 goods-list 是公共内容自己封装的组件引用 接下来会提供封装方式

<view class="hot_goods">
    			<view class="tit">推荐商品</view>
    			
    			<goods-list :goods="goods"></goods-list>
    			
    			
    			
    		</view>
    		<view class="isOver" v-if="isOver">------我是有底线的------</view>

## 2.代码片段 ##

在我们调用接口时，会出现大量数据，但是一次性加载完，影响用户体验，所以操作分页加载  
下面代码中有详细讲解

export default { 
    		data() { 
    			return { 
    				goods:[],//数据数组
    				isOver:false,//用来显示显隐提示语 isOver 默认值false 
    				pageindex:1, //定义分页初始值为1
    			}
    		},
    		// 初始化加载
    		onLoad() { 
    			this.getHotGoods();
    		},
    		components:{ "goods-list":goodsList}, //自定义的组件
    		methods: { 
    			// 获取热门商品
    			async getHotGoods(){ 
    				const res = await this.$myRuquest({ 
    					//在调用数据接口时传参页码变成动态数据
    					url:'/api/getgoods?pageindex='+this.pageindex
    				})
    				console.log(this.pageindex)
    				console.log(res);
    				//此处是为了在下拉刷新时将之前数据塞进去，否则之前数据将丢失
    				this.goods=[...this.goods,...res.data.message];
    				// this.goods=res.data.message;
    			},
    			// 下拉到底部后加载新数据
    			onReachBottom(){ 
    				//判断下一页是否存在数据，不存在将显示暂无数据等提示语
    				if(this.goods.length<this.pageindex*10){ 
    					this.isOver=true;
    				}
    				this.pageindex++;//页数加一
    				this.getHotGoods();//回调接口
    			}
    		}
    	}

# 总结 #

提示：这里对文章进行总结：  
例如：本文仅仅简单介绍了uni-app下拉加载数据使用方式的使用，欢迎大家一起讨论，目前uni-app小白一枚。