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小白一枚。