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

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

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

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, //{total:"12", count: 10, more: 1} 此处主要用于上拉加载是否加载数据
 "p":p
 })
 } else {
 that.setData({
 "hasMore":false
 })
 }
 }
 })
 }
})

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