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

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

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


        });


    }


},