vant-list上拉加载，van-pull-refresh下拉刷新

 

不明白为什么会一直触发load事件，这篇博客https://blog.csdn.net/weixin_45121510/article/details/109078747中给了说明，具体如下：

        一、基础用法

            List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

        二、List 的运行机制是什么？

            List 会监听浏览器的滚动事件并计算列表的位置，当列表底部与可视区域的距离小于offset时，List会触发一次 load 事件。

        三、为什么 List 初始化后会立即触发 load 事件？

            List 初始化后会触发一次 load事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭。

        四、为什么会连续触发 load 事件？

            如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load事件，直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数，理想情况下每次请求获取的数据条数应能够填满一屏高度。

        五、loading 和 finished 分别是什么含义？

            List有以下三种状态，理解这些状态有助于你正确地使用List组件：

            非加载中，loading为false，此时会根据列表滚动位置判断是否触发load事件（列表内容不足一屏幕时，会直接触发）

            加载中，loading为true，表示正在发送异步请求，此时不会触发load事件

            加载完成，finished为true，此时不会触发load事件 在每次请求完毕后，需要手动将loading设置为false，表示加载结束

    用法：

<van-pull-refresh v-model="rainrefreshing" @refresh="onRefresh">
    <van-list v-model="rainloading" :finished="rainfinished" finished-text="没有更多了" :offset="100" @load="onLoad">

        </van-list>
</van-pull-refresh>

data数据：

pagesize: 0,
rainloading: false,
rainfinished: false,
rainrefreshing: false

methods方法：

        getRainData() {
            let _this = this
            let params = {
                current: _this.pagesize,
                riverName: _this.riverName,
                size: 15
            }
            queryRainfallWarn(params).then((res) => {
                if (res.code == 200) {
                    if (res.data.records.length > 0 && this.pagesize > 1) {
                        _this.rainData = _this.rainData.concat(res.data.records)
                    } else if (res.data.records.length > 0 && this.pagesize == 1) {
                        _this.rainData = res.data.records
                    } else if (res.data.records.length == 0) {
                        _this.rainfinished = true
                    }
                }
                _this.rainloading = false
            })
        },
        onLoad() {
            console.log('触发onload')
            if (this.rainrefreshing) {
                console.log('刷新')
                this.rainData = []
                this.rainrefreshing = false
            } else {
                this.pagesize += 1
                this.getRainData()
            }
        },
        // 下拉刷新
        onRefresh() {
            // 清空列表数据
            this.rainfinished = false
            // 重新加载数据
            // 将 rainloading 设置为 true，表示处于加载状态
            this.rainloading = true
            this.pagesize = 0
            this.onLoad()
        }

遇到的问题及解决：

1：在mounted或者create调用,，load也请求了数据，数据回来时已经请求两次了.所以只用load获取数据即可.
2：offset过于高,默认的高度是300，可以降低触发的高度
3.请求的数据过少,请求的数据不足以覆盖页面就会二次加载,可以将参数size调大，保证一次获取可以占满全屏