<template>
<view>
<view v-for="item in list" :key="item.ppkid">
{{item.headline}}
</view>
<text class="loadMore" v-if="loading">{{!loading && list.length<1?"没有了":"加载中"}}</text>
</view>
</template><script>
export default {
data() {
return {
list:[],
loading:false,
refreshing:false,
pageNo:1,
}
},
onLoad() {
this.getData();
},
onReachBottom() {
/* 到底部加载 */
this.getData();
},
onPullDownRefresh() {
// 下拉刷新
this.refreshing = true;
this.getData();
},
methods: {
async getData(){
console.log("0000000000")
let para={
page:this.refreshing ==true? 1 : this.pageNo
};
this.loading=true;
const {
data
} = await this.$http.getunusedpaperlist(para);
if(data.code==1){
this.loading=false;
if (data.data.length ==0) {
uni.showToast({
title: '没有数据',
icon: 'none'
});
return false;
}
if (this.refreshing && this.list.length>0) {//上拉加载很多之后去刷新的页面
uni.showToast({
title: '已经最新',
icon: 'none'
});
this.refreshing = false;
uni.stopPullDownRefresh();
return;
}
if (this.refreshing) {//第一次加载
this.refreshing = false;
uni.stopPullDownRefresh();
this.list = data.data;
this.pageNo = 2;
} else {
this.list = this.list.concat(data.data);
this.pageNo += 1;
}
}
},
}
}
</script><style>
</style>
相关文章
- 10-30微信小程序下拉刷新和上拉加载的实现
- 10-30uni-app 上拉加载下拉刷新
- 10-30搭建自己的直播平台,RecycleView下拉刷新,上拉加载
- 10-30Vue 利用Vant组件实现数据的上拉刷新,下拉加载
- 10-30better-scroll 实现下拉刷新、上拉加载的那些坑
- 10-30uni-app上拉加载下拉刷新的一个简单例子。
- 10-30小程序的tab切换和上拉加载下拉刷新swiper swiper-item scroll-view
- 10-30封装了一个react下拉刷新上拉加载组件
- 10-30基于better-scroll封装一个上拉加载下拉刷新组件
- 10-30安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载(一分钟搞定,超级简单)