• 上拉加载,下拉刷新,分页

    1. 1.使用方式:

    2. //data的默认值

    3.        data() {

    4.            return {

    5.                form_data:{

    6.                    total:'', //总共多少条数据

    7.                    page_size:5,  //每页10条数据

    8.                    page:1,       //第几页

    9.                }

    10.            }

    11.        },

    12.             onReachBottom() { //上拉到底时触发

    13.                let all_total = this.form_data.page * this.form_data.page_size

    14.                if (all_total < this.form_data.total) {

    15.                    //当前条数小于总条数 则增加请求页数

    16.                    this.form_data.page++;

    17.                    this.test_list() //调用加载数据方法

    18.                } else {

    19.                    //console.log('已加载全部数据')

    20.                }

    21.            },

    22.            onPullDownRefresh() { //监听该页面用户下拉刷新事件

    23.                //调用获取数据方法

    24.                this.form_data.page = 1

    25.                this.test_list();//调用加载数据方法

    26.                setTimeout(() => {

    27.                    uni.stopPullDownRefresh(); //结束下拉刷新

    28.                }, 1000);

    29.            },

    30.            //获取数据方法里面push把第一页之后的数据添加在第一页里面  ...就是上一个数组的意思

    31.            if(page == 1){

    32.                that.data_list = res.data.data

    33.            }else{

    34.                that.data_list.push(...res.data.data)

    35.            }

        1. 2.pages.json配置文件:

          1. {

    36.            "path" : "pages/house/house_repair",

    37.            "style" :                                                                                    

    38.            {

    39.                "navigationBarTitleText": "测试",

    40.                "enablePullDownRefresh": true,    //此参数为true即可

    41.                "navigationStyle":"custom"

    42.            }

    43.        }