好资源导航 » 文章资讯 » 微信小程序实现上拉加载功能

微信小程序实现上拉加载功能

2023-08-08 13:15:03 75

本文实例为大家分享了微信小程序上拉加载的具体代码，供大家参考，具体内容如下

demo.wxml 文件


{{item.store_name}}






玩命加载中




没有更多内容了

demo.js文件

Page({
data:{
listdata:[],//数据
paginated:'',
//{total:"12",count:10,more:1}total数据总数，count：当前分页数据数据，more：1表示还有，0表示无数据
p:0,//当前分页；默认第一页
hasMore:true//提示
},
onLoad:function(options){
varthat=this;
varp=that.data.p;
this.loadmore();
},
onReachBottom:function(){
varthat=this;
varpaginated=that.data.paginated;
if(paginated.more!=0){
this.loadmore();
}else{
that.setData({
"hasMore":false
})
}
},
loadmore:function(){
wx.showToast({
title:"玩命加载中",
icon:'loading',
duration:1000
})
varthat=this;
varp=++that.data.p;
wx.request({
url:'xxx',
data:{
"json":JSON.stringify({
"demo":"xxx","p":p
})
},
method:'POST',
header:{
'content-type':'application/x-www-form-urlencoded'
},
success:function(res){
if(res.data.data!=0){
that.setData({
"listdata":that.data.listdata.concat(res.data.data),//加载数据
"paginated":res.data.paginated,//{total:"12",count:10,more:1}此处主要用于上拉加载是否加载数据
"p":p
})
}else{
that.setData({
"hasMore":false
})
}
}
})
}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

微信小程序实现上拉加载功能

热门推荐

随机推荐