本文实例讲述了微信小程序实现上拉加载功能。分享给大家供大家参考，具体如下：

开发需求

进入页面，加载初始数据，当向上拖动页面至底部，自动加载新的数据，即上拉加载更多数据。

演示

index.wxml

<!-- 数据列表 --><view wx:for="{{listdata}}" wx:key="listdata" class='listitem'> <view class='title'>{{item.title}}</view> <view class='title'>资源ID:{{item.id}}</view> <image src="{{item.coverimg}}" class='cover'></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>

index.js

Page({ data: { listdata:[], //数据 moredata: '', p:0, //当前分页；默认第一页 hasMore:true //提示 }, //加载初始数据 onLoad: function (options) { var that = this; //初始页面 var p = that.data.p; this.loadmore(); }, //触底事件 onReachBottom:function(){ var that = this; //检查是否还有数据可以加载 var moredata = that.data.moredata; //如果还有，则继续加载 if (moredata.more != 0) { this.loadmore(); //如果没有了，则停止加载，显示没有更多内容了 }else{ that.setData({ "hasMore": false }) } }, //发起请求 loadmore:function(){ //加载提示 wx.showLoading({ title: '加载中', }) var that = this; //页面累加 var p = ++that.data.p; //请求服务器 wx.request({ url: '你的服务器/server.php?page=' + p, data: { "json": JSON.stringify({ "p": p }) }, method: 'POST', header: { 'content-type': 'application/x-/api/data.php?page' + p,`

index.wxss

.listitem{ width: 90%; height: 155px; background: rgba(0, 0, 0, 0.2); margin:10px auto; 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:30px auto 30px; color:#ccc; font-size: 15px;}

服务端返回的数据格式

返回json数组的形式，例如

[ {"id":"1","title":"标题1","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"}]

希望本文所述对大家微信小程序设计有所帮助。