直接上代码吧。不足之处,多多指教,一起进步
1.wxml页面的最后敲上,css自己定义
<view class="loadmore" mtype="{{mtype}}" hidden="{{hidden}}"><text>已经没有更多了~</text></view>
2.js的初始数据中设置:
data: { page: 0, //当前页 totalPage: 0, //总页数 mtype: 1, //加载更多动画显示类型 hidden: true //加载动画显示与隐藏 },
3.js的内置触底函数中如下操作
//页面滑动到底部 onReachBottom: function (e) { console.log("lower"); var that = this; var page = that.data.page + 1; //当前页+1 = 下一页 that.getPhotoInfo(page); },
4.js后台交互函数
getPhotoInfo:function(e){ var that = this; var atPage = e; //当前页 var params = { page: atPage //页数 }; if(atPage == 1){ api.getPhotoInfo(params).then(res => { console.log(res) if (res['code'] == '200') { wx.stopPullDownRefresh(); //停止下拉刷新 //更新数据 that.setData( { photoInfo: res.data.list, page: atPage, totalPage: res.data.totalPage, hidden: true, mtype: 1 }); } }) }else if(atPage <= that.data.totalPage){ api.getPhotoInfo(params).then(res => { console.log(res) if (res['code'] == '200') { wx.stopPullDownRefresh(); //停止下拉刷新 //更新数据 that.setData( { photoInfo: that.data.photoInfo.concat(res.data.list), //此处concat类似push,但又不完全是,可以测试下 page: atPage, totalPage: res.data.totalPage, hidden: true, mtype: 1 }); } }) }else { //更新数据,已经没有了 返回 that.setData( { hidden: false, mtype: 1 }); } },