vant List 列表组件分页加载更多关于清空数据后多触发一次网络请求问题

最新推荐文章于 2025-03-05 17:22:26 发布

weixin_45965766

最新推荐文章于 2025-03-05 17:22:26 发布

阅读量692

点赞数 4

分类专栏：前端-vant 文章标签： vue.js 前端框架

本文链接：https://blog.csdn.net/weixin_45965766/article/details/130293125

版权

前端-vant 专栏收录该内容

2 篇文章

订阅专栏

在切换查询条件时，为防止额外的网络请求，文章讲述了如何通过设置`loading=true`来阻止List组件的load事件。同时提到，配置`immediate-check=false`可避免初始化时的滚动检查触发加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

切换查询分类或搜索等场景需要先把原来的数据项清空,这时如果已不是第一页数据清空后List组件会触发触底load事件,在@load中写的网络请求就会执行,加上自己主动调用的请求就多了一次,这里加上this.loading = true阻止触发load事件

// 重置方法
changeArticleType (sorter) {
      this.queryParams.sorter = sorter
      this.queryParams.current = 1
      this.dataList = []
      // 注意这里加上
      this.loading = true
      this.getArticle()
    }

在这里插入图片描述

配置immediate-check为false可以阻止初始化时立即执行滚动位置检查触发load事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_45965766

关注关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vant list列表页点击搜索删选，load方法触发多次

qq_40685103的博客

03-07

1105

vant list列表页点击搜索删选，load方法触发多次

vant list列表组件分页场景使用及搜索框输入-请求数据-防抖处理

luoxiaonuan_hi的博客

05-25

2381

vant list列表组件分页场景使用及搜索框输入-请求数据-防抖处理

1 条评论您还未登录，请先登录后发表或查看评论

vant组件库中使用van-list组件中load加载事件触发多次的问题

weixin_49203377的博客

12-03

7595

背景：在使用vant UI组件库的时候，当列表加载到底部的时候，可以结合load加载事件，继续获取下一页的数据但是和tab切换结合的时候，就会出现问题了，比如第一个tab下面我进行了忘下滑动的滚动事件，然后我再切换到第二个tab下面，这时候，又会自动执行了一遍加载事件（感觉1.应该是刚开始没有数据，然后直接到底部了，所以唤起了load事件2.第一个列表由于往下滑动了，所以滚动条还在刚才滑动下去的位置，所以直接到底了又触发了load加载事件）所以针对这两个问题做了以下处理 1.首先页面上 loa

列表分页的实现-使用vant 2.x下的van-list

2301_76891881的博客

03-05

1314

this.newsList.length >= this.totalElements ||//判定方式一:新闻列表newsList的元素数量已经达到了能够请求的总元素数量。const res = await this.loadPageData(this.currentPage)//注意这里后面不能直接取.datas。this.newsList = [...this.newsList, ...res.datas.content]//数组拼接。this.loading = false//结束加载状态。

van-list会多次触发onLoad事件

大把小米的博客

02-24

3720

1.List 初始化后会触发一次 load 事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭。 2.根据有无数据来控制是否展示van-list，因为有时候页面初始化没有数据时vant-list也会触发一次 ...

【Vant】使用 van-list load方法请求异常，多次请求

qq_45630675的博客

12-08

2362

Vant 使用 van-list load方法请求异常，多次请求

vue3 vant组件list组件

04-01

引用3中提到UI组件---vantList组件接口多次调用大坑问题，这可能是因为没有正确管理加载状态，或者在滚动时频繁触发load事件。这时候需要提醒用户检查offset属性的设置，或者使用immediate-check来防止初始化时立即...

vant-ui框架的一个bug（切换后onload不触发）

最新发布

04-03

### 实现 Vant List 的下拉...另外，关于可能遇到的问题之一——`van-list` 的 `finished` 属性可能会因判断条件不当而导致持续加载的情况，可以通过合理管理分页机制以及明确设定何时停止加载来规避此问题[^3]。 ---

使用van-list 重复触发onLoad 的问题

weixin_43666952的博客

06-11

1753

在对公司项目进行H5开发的时候，在使用van-list进行上拉加载的时候，按照文档进行了配置，发现总是首次加载初始化时正确的，但是上拉到底部触发第二页的时候就会像漏斗一样堵不住，一溜烟的加载请求后面好几页，样式上也不存在超出隐藏的样式问题，就是一上拉就突突突的加载很多，调整了很久才发现自己每次请求都是直接赋值而不是数组push到一个数组里面，导致每次请求后的页面高度都是在页面底部所以会一直触发onLoad方法就会请求接口多次。

vant中页面分页加载

zcj的博客

01-11

613

vant中页面分页加载。

vant中List组件中load事件触发多次问题

夏夏

12-06

9130

是否设置的加载数据不够占满屏幕 List中的数据不够占满屏幕则会触发load事件，产生重复加载现象。可以将一次加载的数据量增大来解决此问题。父级容器是否出现overflow:scroll的属性，去掉即可。如果在 html 和 body 标签上设置了overflow-x: hidden样式，会导致 List 一直触发加载。这个问题的原因是当元素设置了overflow-x: hidden样式时，该元素的overflow-y会被浏览器设置为auto，而不是默认值visible，导致 List...

使用vant list实现订单列表，支持下拉加载更多

mfxcyh的博客

11-17

3026

在公司项目开发时，有一个需求是实现可以分页的订单列表，由于是移动端项目，所以最好的解决方法是做下拉加载更多。

vant中list组件的使用/点击加载更多数据

2301_76343523的博客

12-06

679

1.在api/book.js中写向后端发送请求的接口2.前端商城页面详写（1）templatv-for用法（转载）

UI组件---vantList组件接口多次调用大坑问题

COCOLI_BK的博客

07-09

956

问题描述：当使用refesh下拉操作时，vanlist组件会多次调用（大概三次）！

解决vant列表刷新，接口调用多次

weixin_51140082的博客

11-23

419

onLoading默认为false，为false，才会调用接口,开始调接口将onLoading改为true，等到执行完再改为false// 请求数据列表})

vant-list使用，请求接口之后会多几次load加页面

qq_43468165的博客

03-01

3487

5页（极端假设）的情况下，如果你的内容小于了可是窗口，第一导致load不能触发，第二侥幸可视窗口高度本来就小，能滚到底load触发了，你可能在tab0的时候成功获取了page=2的内容了，但在切换tab时候就开始不受控值乱掉接口了。是因为产品在设置时候是会考虑到，触底加载事件的触发的。那上面描述这种情况，tab切换了，又进行自动加载数据的情况前端就不要想着制止了（更全面的来说，可控但是真没必要前端增加额外参数来控制了），因为van-list 也是害怕你填不满页面，实现不了下一步滚动在帮你加载充足数据上来。