小程序日活超两亿_微信小程序完成上拉加载功用

2021-01-06 16:55| 发布者: | 查看: |

微信小程序实现上拉加载功能     作者:£AP︶ㄣOL◢◤LO   这篇文章主要为大家详细介绍了微信小程序实现上拉加载功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

demo.wxml  文件

 view wx:for="{{listdata}}" wx:key="listdata" 
 view {{ item.store_name }} /view 
 image src='{{item.logo}}' /image 
 /view 
 view 
 block wx:if="{{hasMore}}" 
 view 
 text / text 玩命加载中 /text 
 /view 
 /block 
 block wx:else 
 view 
 text 没有更多内容了 /text 
 /view 
 /block 
 /view 

demo.js文件

Page({
 data: {
 listdata:[], //数据
 paginated: '',
 //{total:"12", count: 10, more: 1} total数据总数,count:当前分页数据数据,more:1表示还有,0表示无数据
 p:0, //当前分页;默认第一页
 hasMore:true //提示
 onLoad: function (options) {
 var that = this;
 var p = that.data.p;
 this.loadmore();
 onReachBottom:function(){
 var that = this;
 var paginated = that.data.paginated;
 if (paginated.more != 0) {
 this.loadmore();
 }else{
 that.setData({
 "hasMore": false
 loadmore:function(){
 wx.showToast({
 title: "玩命加载中",
 icon: 'loading',
 duration: 1000
 var that = this;
 var p = ++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
})

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


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部