<template>
<view>
列表
<uni-load-more :status="status" :content-text="contentText" />
</view>
</template>
<script>
import uniLoadMore from '@/components/components/uni-load-more/uni-load-more.vue';
export default {
data() {
return {
List:[],
status : 'loading',
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
},
page:1,
newData:[]
}
},
onLoad() {
uni.request({
url:url,
method:'GET',
data:{},
success:res =>{
this.List=res.data;
}
})
},
// 上拉加载更多,onReachBottom上拉触底函数
onReachBottom : function(){
this.status = 'more';
this.loadMoreFunc();
},
methods: {
loadMoreFunc:function(){
//展示loading
this.status = 'loading';
page++;// 当上拉触发页码++
uni.request({
url:url+page,
method:'GET',
data:{},
success:res =>{
newData=res.data;
//concat() 把它们连接起来不懂的可以查一下哦
this.List = this.List.concat(newData);
}
,fail: res => {
this.status = 'noMore'; //没有数据时显示‘没有更多’
}
})
}
},
components:{
uniLoadMore
}
}
</script>
<style>
</style>