上拉刷新下拉加载

<template>
<view class="box">
<view v-for="(item, index) in newsList" class="newslist">
<view class="item">
{{item.title}}
</view>
</view>
<view class="loading">{{loadingText}}</view>
</view>
</template>
<script>
var _self, page = 1, timer = null;
export default {
data(){
return{
newsList:[],
loadingText:'加载中...'
}

},
//页面加载
onLoad(){
_self = this;
//获取首页数据
this.getnewsList()
},

// 下拉刷新,初始化第一页数据
onPullDownRefresh(){
this.getnewsList();
},
//页面滚动到底部的事件
onReachBottom(){
if(timer != null){
clearTimeout(timer);
}
timer = setTimeout(function(){
//加载更多数据
_self.getmorenews();
}, 1000);
},
methods:{
getmorenews(){
if(_self.loadingText != '' && _self.loadingText != '加载更多'){
return false;
}
_self.loadingText = '加载中...';
//在当前页面显示导航条加载动画。
uni.showNavigationBarLoading();
uni.request({
url: 'https://ceshi2.dishait.cn/api/v1/postclass/1/post/'+page,
method: 'GET',
success: function(res){
_self.loadingText = '';
if(res.data == null){
//在当前页面隐藏导航条加载动画。
uni.hideNavigationBarLoading();
_self.loadingText = '已加载全部';
return false;
}
page++;
console.log(res);
_self.newsList = _self.newsList.concat(res.data.data.list);
_self.loadingText = '加载更多';
uni.hideNavigationBarLoading();
}
});
},
getnewsList(){
page = 1;
uni.showNavigationBarLoading();
uni.request({
url: `https://ceshi2.dishait.cn/api/v1/postclass/1/post/${page}`,
method: 'GET',
success: function(res){
console.log(res)
page++;
_self.newsList = res.data.data.list;
uni.hideNavigationBarLoading();
uni.stopPullDownRefresh();
_self.loadingText = '加载更多';
}
});
}
}
}
</script>
<style>
.box{
width: 100vw;
height: 100vh;
}
.item{
width: 100vw;
height: 200rpx;
border: 1rpx solid gray;
text-align: center;
line-height: 200rpx;
}
.loading{
text-align: center;
color: #8F8F94;
}
</style>

pages.json加上
"enablePullDownRefresh":true

{
"path": "pages/center/ces",
"style": {
"navigationBarTitleText": "学员管理",
"enablePullDownRefresh":true
}
},
posted @ 2022-03-16 18:20  前端小强166  阅读(122)  评论(0)    收藏  举报