微信小程序：分页和加载更多

直接上代码吧。不足之处，多多指教，一起进步

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
        });
    }
},