vant |
您所在的位置：网站首页 › vant列表组件重复触发 › vant |
vant
不明白为什么会一直触发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，表示加载结束
用法：
data数据： pagesize: 0, rainloading: false, rainfinished: false, rainrefreshing: falsemethods方法： 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调大，保证一次获取可以占满全屏 |
【本文地址】
今日新闻 |
推荐新闻 |