本文实例为大家分享了微信小程序上拉加载的具体代码,供大家参考,具体内容如下
demo.wxml 文件
<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{ item.store_name }}</view> <image src='{{item.logo}}'></image> </view> <view class="load-more-wrap"> <block wx:if="{{hasMore}}"> <view class="load-content"> <text class="weui-loading"/><text class="loading-text">玩命加载中</text> </view> </block> <block wx:else> <view class="load-content"> <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,more: 1} 此处主要用于上拉加载是否加载数据 "p":p }) } else { that.setData({ "hasMore":false }) } } }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。