<template>
<view class="index-container">
<view class="container-item" v-for="(item,index) in shopList" :key="item.id">
<image class="item-pic" :src="item.images[0]" mode=""></image>
<text>{{item.name}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
query:{},
shopList:[],
page:1,
pageSize:10,
total:0,
isloading:false, //节流阀
}
},
onLoad(options) {
// this.query = options
this.query = {id:1,name:'文字'}
this.getShopData();
},
methods:{
getShopData(cb) {
this.isloading = true
uni.showLoading({
title: '数据加载中..'
});
uni.request({
url:`https://www.escook.cn/categories/${this.query.id}/shops`,
method:"GET",
data:{
_page:this.page,
_limit:this.pageSize
},
success: (res) => {
this.shopList = [...this.shopList,...res.data]
this.total = res.header['X-Total-Count'] - 0
},
complete: () => {
uni.hideLoading();
this.isloading = false
cb && cb()
}
})
}
},
// 触底加载下一页
onReachBottom() {
// 判断是否有下一页数据 页码值*每页显示多少条数据>= 总数据
if(this.page * this.pageSize >= this.total) {
return uni.showToast({
title:'没有数据了',
icon:"none"
})
}
if(this.isloading) return
this.page++;
this.getShopData();
},
// 下拉刷新数据
onPullDownRefresh() {
this.shopList = [];
this.page = 1
this.total = 0
this.getShopData(()=> {
uni.stopPullDownRefresh();
})
},
}
</script>
<style lang="less">
.index-container{
.container-item {
padding: 20rpx;
margin: 20rpx;
border-radius: 20rpx;
background-color: #efefef;
.item-pic {
width: 160rpx;
height: 160rpx;
}
}
}
</style>
uni-app下拉刷新 和 上拉加载
于 2023-03-01 20:49:30 首次发布