van-list 分页查询，节流处理

1. 代码环境

vue2 + vant 2 版本
使用的是 van-list 和 van-pull-refresh 组件

2. 业务需求

若涉及tabs，请点击->
如图所示：
1. 第一次进入记录页面，只显示第一页的数据；
2. 只要是下拉刷新的操作，都只加载和显示第一页的数据；
3. 滚动条向下滚动，只要滚动条的位置距离底部的位置小于offset设置的值，则触发onLoad事件；
4. 需要防止滚动事件频繁处罚，则利用定时器做节流处理
5. 加载完成后显示 finished-text 中的内容
ps：红色框是多选框

3. vue页面逻辑代码具体如下

<template>
  <div class="record">
    <div class="record-content">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <van-list
                v-if="recordList.length"
                v-model="loading"
                :finished="finished"
                :offset="200"
                finished-text="没有更多了"
                @load="onLoad"
                >
                <van-checkbox-group v-model="checkIds" ref="checkboxGroup" @change="handleClick">
                    <van-cell v-for="item in recordList" :key="item">
                         <van-checkbox shape="square" :name="item.id">
                            <div class="record-list-items">
                                <div class="record-list-items-content">
                                    <div class="info">
                                        <span :class="`info-${item.carBckColor}`">{{ item.carNum }}</span>
                                        <span class="info-type"> {{ item.surTypeName }} </span>
                                    </div>
                                    <div class="address-speed">
                                        <span>起：</span><span>{{ item.beginDateStr }}</span>
                                    </div>
                                    <div class="address-speed">
                                        <span>止：</span><span>{{ item.endDateStr }}</span>
                                    </div>
                                </div>
                                <div class="record-list-items-state" :class="`record-list-items-state-${item.state}`">{{ item.statusName }}</div>
                            </div>
                        </van-checkbox>
                    </van-cell>
                </van-checkbox-group>
            </van-list>
            <van-empty description="暂无数据" v-else/>
        </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import api from '../factory.js'
export default {
    name: 'CarBlacklist',
    data() {
        return {
            recordList: [], // 展示的list
            loading: false, // 是否加载
            finished: false, // 是否已完成加载
            refreshing: false, // 是否刷新
            params: { // 参数
                page: 1, // 当前页数
                rows: 10, // 每页加载数
            },
            // 当前选中的列表的某一项
            checkIds: [],
            // 定时器
            timer: null
        }
    },
    methods: {
        // 滚动条与底部距离小于 offset 时触发
        onLoad() { 
            this.loading = false;
            // 设置定时器做节流处理，避免滚动时频繁触发加载事件
            if(!this.timer) {
                this.timer = setTimeout(() => {
                    this.params.page++;
                    this.getList();
                    // 清除定时器，释放内存
                    this.timer = null;
                }, 1000)
            }
        },
        // 下拉刷新
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            // 重置页码数和list，页码数设置为0，而不是1，因为onLoad方法中会执行++ 操作
            this.params.page = 0;
            this.recordList =  [];
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad()
        },
        // 查询车辆黑名单数据
        getList() {
            api.querySurveysRecord({data: this.params}).then((data) => {
                // 因为每次需要展示的数据是1~n（page * row）页的数据，所以使用concat，拼接数组
                this.recordList =  this.recordList.concat(data.list);
                this.refreshing = false
                // 若数组的长度大于总数，则加载完成，finished设置为true
                if (this.recordList.length >= data.totalSize) {
                    this.finished = true
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        // 当前选中的项的id值，数组类型
        handleClick(ids) {
            this.checkIds = ids;
        },
        // 获取选择的id值
        handleConfirm() {
            // 无值给出提示
            if (!this.checkIds.length) {
                this.$toast('请至少选择一条记录!');
                return;
            }
            // 向父级页面触发事件并传值
            this.$emit('handleConfirm', this.checkIds);
        }
    }
}
</script>

<style scoped lang="less">
// 设置样式，防止穿透；若不起作用，可加 ！important
.van-pull-refresh {
        height: calc(100vh - 102px);
        overflow-y: scroll;
    }
    .van-list {
        height: auto;
    }
</style>

4. 模拟factory.js中的查询接口

// 查询list接口
    querySurveysRecord: (params) => {
        return new Promise((resolve, reject) => {
            vue.ajaxReset({
                method: 'post',
                url: `evo-car/VERSION/carSurvey/getSurveys`,
                isNoLock: true,
                isSNoTip: true,
                data: params,
                onSuccess(rel) {
                    resolve(rel.data.data)
                },
                onError(rel) {
                    reject(rel.data)
                }
            })
        })
    },