当前位置: 首页 > 后端技术 > PHP

上拉加载微信小程序加载更多数据底部加载点击加载更多数据

时间:2023-03-29 22:00:01 PHP

开发需要进入页面加载初始数据。当页面被拖到底部时,会自动加载新的数据,也就是上拉加载更多的数据。Demoindex.wxml{{item.title}}资源ID:{{item.id}}绝望加载没有内容了index.jsPage({data:{listdata:[],//datamoredata:'',p:0,//当前页;默认第一页hasMore:true//prompt},//loadinitialDataonLoad:function(options){varthat=this;//初始页面varp=that.data.p;this.loadmore();},//底部事件onReachBottom:function(){varthat=this;//检查是否还有数据加载varmoredata=that.data.moredata;//如果有,继续加载if(moredata.more!=0){this.loadmore();//如果没有了,停止加载,显示没有内容}else{that.setData({"hasMore":false})}},//发起请求loadmore:function(){//正在加载提示wx.showLoading({title:'Loading',})varthat=this;//页面累积varp=++that.data.p;//请求服务器wx.request({url:'你的服务器/server.php?page='+p,data:{"json":JSON.stringify({"p":p})},method:'POST',header:{'content-type':'application/x-www-form-urlencoded'},//请求成功,回调函数success:function(res){//隐藏加载提示wx.hideLoading();//判断PUC是否为空if(res.data!=0){that.setData({//将新加载的数据追加到原数组"listdata":that.data.listdata.concat(res.data),//加载数据"moredata":res.data,"p":p})}else{that.setData({"hasMore":false})}}})}})描述1.将url更改为您的服务器链接,格式为http:域名/目录/?page=页码例如:http://www.baidu.com/api/data.php?page=1页码是可变的,所以声明一个变量p,所以就是`url:'http://www.baidu.com/api/data.php?page'+p,`index.wxss.listitem{width:90%;height:155px;background:rgba(0,0,0,0.2);margin:10pxauto;text-align:center;position:relative;color:#fff;}.listitem.cover{width:100%;height:155px;position:absolute;top:0;left:0;z-index:-100;}.load-more-wrap.load-content{text-align:center;margin:30pxauto30px;color:#ccc;font-size:15px;}返回数据的格式服务器返回一个json数组的形式,例如[{"id":"1","title":"Title1","coverimg":"url1"},{"id":"2","title":"标题2","coverimg":"url2"},{"id":"3","title":"标题3","coverimg":"url3"},{"id":"4","title":"标题4","coverimg":"url4"},{"id":"5","title":"标题5","coverimg":"url5"}]作者:坦克日期:2020-04-20网址:www.likeyun.cn微信:face6009