您的位置:首页 > 移动开发

uni-app下拉刷新、上拉页面加载数据,实现分页效果

2020-06-08 04:32 736 查看
上拉刷新需配置 pages.json
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true  //哪个页面需要下拉刷新就在哪个页面配置里加上这一句话
}
}
template
<text class="loading-text">
{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}
</text>
script
var page = 1
export default {
data() {
return {
dataList:[],
/* 上拉刷新 */
loadingType: 0,
contentText: {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: "没有更多数据了"
},
}
},
onLoad() {
this.getListInfo();
},
/*下拉刷新*/
onPullDownRefresh: function() {
this.getListInfo();
},
/*上拉刷新*/
onReachBottom:function(){
this.getMoreListInfo()
},
methods: {
getListInfo(){
const that = this;
page =1
uni.request({
url:'http://*********',
method:'POST',
data:{
page:page
},
success(res) {
that.dataList = res.data.data.list
uni.hideNavigationBarLoading();
uni.stopPullDownRefresh();	//得到数据后停止下拉刷新
}
})
},
/* 上拉加载 */
getMoreListInfo(){
const that = this
page++

if (that.loadingType != 0) {
return false; //loadingType!=0;直接返回
}
that.loadingType = 1;
uni.showNavigationBarLoading();
uni.request({
url:'http://*********',
method:'POST',
data:{
page:page
},
success(res) {
if(that.dataList.length == res.data.data.count){ //当之前的数据长度等于count时跳出函数,不继续执行下面语句
that.loadingType = 2;
uni.hideNavigationBarLoading();//关闭加载动画
return false;
}
that.dataList = that.dataList.concat(res.data.data.list)
that.loadingType = 0;//将loadingType归0重置
uni.hideNavigationBarLoading();//关闭加载动画
}
})
}
}
css
.loading-text{
height: 80upx;
line-height: 80upx;
font-size: 25upx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐