下拉刷新&上拉加载效果图
下拉刷新:
备注:会把网络上的最新数据刷新出来;
上拉加载
备注:打开一个小程序会有很多条数据,我们不可能一次性把所有的数据全部加载出来,需要我们进行上拉加载更多数据…
比如:第一次打开8条数据,但是8条数据不够我们使用,我们就需要进行上拉在加载8条数据,这样以此类推;需要多少,我们就加载多少条,这样就加快了打开界面的速度…
实现的代码
"enablePullDownRefresh":true
主要代码,全部都有注释
<script>
var _this;
var page=1;
var timer=null;
export default {
data() {
return {
pages:[],
loading:"加载更多"
}
},
onLoad:function(){ //页面第一次加载是会触发,可以把一些不需要实时更新的数据放入
_this=this;
this.getNews();
},
onPullDownRefresh:function(){ //监听用户下拉刷新的功能
this.getNews(); //刷新之后给触发getNews()函数;
},
onReachBottom:function(){ //当划到最底部的时候触发事件
/* console.log("我是最底部了"); */
this.getMoreNews(); //到底之后会触发getMoreNews()函数;
if(timer!=null){ //加载缓冲延迟
clearTimeout(timer);
}
timer=setTimeout(function(){
_this.getMoreNews();
},600);
},
methods:{
getMoreNews:function(){ //数据到底,触发这个函数
_this.loading="加载中...";
uni.showNavigationBarLoading(); //一读取数据,就进行刷新
uni.request({
url: this.$host+'/tb/school/list',
method: 'POST',
data: {
page:page,
limit:10,
},
header:{'content-type':'application/x-www-form-urlencoded'},
success: res => {
uni.hideNavigationBarLoading();
/* console.log(res.data.page.records.length); */
if(res.data.page.records.length==0){
_this.loading="加载完成";
return false;
}
var pages=res.data.page.records;
_this.pages=_this.pages.concat(pages); //进行数据的累加
uni.stopPullDownRefresh(); //数据加载完成,刷新结束
page++; //页数的++
_this.loading="加载更多";
},
fail: () => {},
complete: () => {}
});
},
getNews:function(){
page=1;
uni.showNavigationBarLoading(); //一读取数据,就进行刷新
uni.request({
url: this.$host+'/tb/school/list',
method: 'POST',
data: {
page:page,
limit:12,
},
header:{'content-type':'application/x-www-form-urlencoded'},
success: res => {
console.log(res.data.page.records);
var pages=res.data.page.records; //产生的数据赋给pages变量
_this.pages=pages; //把产生的pages变量,放到oages数组里面; ps:_this=this;
uni.stopPullDownRefresh(); //数据加载完成,刷新结束
uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止
page++; //页数的++
},
fail: () => {},
complete: () => {}
});
},
}
}
</script>