小程序列表页分页获取数据，下滑加载更多_微信小程序列表实现加载页面

页面代码

<view class="fp_box">
<!--等待框-->
<view class="load_style" hidden="{{!loading}}">
    <image src="/img/common/load.png"></image>
    <view>加载中...</view>
</view>
 
 
    <view class="bor-top">
        <view class="fp_item_box" wx:for="{{fplist_data}}" wx:key="index">
 
            <view class="fp_top">
                <view class="fp_head"><image src="{{item.header}}"></image></view>
 
                <view class="fp_count">
                    <view class="cishu"><text>{{item.username}}</text><text>（共带看{{item.dkcount}}次）</text></view>
                    <view class="shijian">最新带看：{{item.dktime}}</view>
                </view>
 
                <view class="fp_lian">
                    <view bindtap="dk_tel" data-index='{{index}}' id='{{item.handset}}'  class="tel_icon"><image src="/img/common/tel_icon.png"></image></view>      
                    <view class="liao_icon"><image src="/img/common/mes_icon.png"></image></view>
                </view>
 
            </view>
            <view class="fp_con">{{item.memo}}</view>
 
        </view>
    </view>
 
</view>

js

    /**
     * 页面的初始数据
     */
    data: {
        loading: true,
 
        //房源id
        detailId: '',
        //城市id
        cityId: '',
        currentTab: 0,
 
        page_num: 1, //默认页码
        totalpage:0, //总页数 
        listLock: 1,//列表翻页锁，防止数据不够时翻页报错
        fplist_data: [],//数据
 
    },

    onLoad: function (options) {
        this.setData({
            detailId: options.houseId,
            cityId: options.cityId
        })  
        
        this.getData(options);
    },

 获取数据

    //数据
    getData: function () {
        var that = this;
        // that.setData({
        //     detailId: options.houseId,
        //     cityId: options.cityId
        // })
        var page_size = 15;
        var page_data = { page: that.data.page_num, pcount: page_size };
        var houseid = {  hid: that.data.detailId,有其他参数可以直接传到这里，没有就不写}
 
        var post_data = Object.assign(page_data, houseid);//拼接json
        wx.request({
            
            url: '接口连接' + that.data.cityId + '/v1/brokerinfolist',//json数据地址
            //url: '接口连接' + that.data.cityId + '/v1/brokerinfolist' + '?orderrule=2',//json数据地址
            data: post_data,
            method: "post",
            //get时用
            //headers: { 'Content-Type': 'application/json' },
            //post时用
            header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
            success: function (res) {
 
                if (res.data.status == 200) {  
                    console.log('totalCount : ', res.data.data.totalCount)     
 
                    if (res.data.data.totalCount == 0) {
                        console.log(0);
                        that.setData({
                            // listHidden: true,
                        });
                        
                    } else if (res.data.data.totalCount < page_size) {
                        console.log(res.data.data.totalCount, '小于', page_size)
                        that.data.listLock = 2;
                        that.setData({
                            loading: false,
                            fplist_data: res.data.data.list,
                        });
                
                    } else {
                        that.data.listLock = 1;
                        that.data.totalpage = Math.ceil(res.data.data.totalCount / page_size);
                        console.log('totalpage', that.data.totalpage);
                        if (that.data.totalpage >= that.data.page_num) {
                            console.log('翻页之前数据', that.data.fplist_data) 
 
                            var listData = that.data.fplist_data.concat(res.data.data.list);
 
                            console.log('翻页之后数据', that.data.fplist_data.concat(res.data.data.list))
                            //为下一页的请求参数做准备
                            that.setData({
                                fplist_data: listData,
                                loading: false,
                            });
                            // wx.hideLoading();
                            that.data.page_num += 1; //页码增加，保证下次调用时为新的一页。
                            console.log('翻页', that.data.page_num);
                            console.log('setData', listData);
                        }
                        // else if (that.data.totalpage < that.data.page_num){
                        //   console.log("没有新数据");
                        //   that.data.listLock=2;
                        // }
                    }
    
                } else {
                    that.data.listLock = 2;
                    console.log('msg:', res.data.msg);//204无结果          
                    that.setData({
                        // listHidden: true,
                    });
                }
 
 
            },
            fail: function (res) {
                console.log('error', res);
            },
            complete: function (res) {
                wx.hideLoading();
                // console.log('complete', res);
            }
        });
    },

 加载更多

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        
        var self = this;
        console.log('totalpage', self.data.totalpage)
        console.log('page_num', self.data.page_num)
        if (self.data.totalpage < self.data.page_num) {
            console.log("没有新数据");
            self.setData({
                
            });
            self.data.listLock = 2;
        }
        if (self.data.listLock == 2) {
            return false;
        }
        wx.showLoading({ title: '加载中', icon: 'loading', duration: 10000 });
 
        self.getData(self.data);
  
    },

json格式

{
"status": "200",
"msg": "OK",
"isPC": 1,
"data": {
"totalCount": 16,
"list": [
    {
        "memo": "test",
        "userid": 590559,
        "username": "王wang",
        "handset": "13211111",
        "netbrokerscore": "6890",
        "header": "图片链接",
        "id": "590559",
        "shopname": "交道口店",
        "nx": 6,
        "dkcount": 3,
        "dktime": "2019-06-28",
        "housesid": "500139405",
        "job_leave": "1",
        "esid": "720859",
        "havereport": 1,
        "brokertag": ""
    }
   ]
  }
}

最终效果