本文实例为大家分享了微信小程序上拉加载的具体代码,供大家参考,具体内容如下
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
- })
- }
- }
- })
- }
- })