uni-app 下拉加载分页数据

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>
			
			<!-- 只存在于单独页面v-for循环遍历 -->
			<!-- <view class="goods_list">
				<view class="goods_item" v-for="item in goods" :key="item.id">
					<image :src="item.img_url"></image>
					<view class="price">
						<text>{{item.sell_price}}</text>
						<text>{{item.market_price}}</text>
					</view>
					<view class="name">
						{{item.title}}
					</view>
				</view>
			</view> -->
		</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小白一枚。