vue vant中list首次加载不满一屏会请求两次数据重复（已解决）

最新推荐文章于 2025-08-20 16:05:49 发布

原创最新推荐文章于 2025-08-20 16:05:49 发布 · 4.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #list #linq

web 同时被 3 个专栏收录

31 篇文章

订阅专栏

前端

31 篇文章

订阅专栏

26 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中使用van-list组件实现数据的分页加载。通过设置`v-model`为加载状态，`finished`属性为是否加载完毕，`finished-text`显示无更多数据提示，以及添加`immediate-check=true`来立即检查数据是否加载完成，从而达到动态加载更多内容的效果。

首先把 finished 默认为true

然后添加 immediate-check=true

<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="true">
</van-list>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Answer_Ming

关注关注

1
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3--实现瀑布流-长列表-懒加载

小白小白从不日别的博客

10-21

1709

在这一章我们主要学习：瀑布流、长列表、懒加载等功能瀑布流是一个比较复杂的通用组件，因为我们要尽量做到普适，所以就需要考虑到各种场景下的处理方案，尽量可以满足日常开发的场景，所以这就在原本就复杂的前提下，让这个功能变得更加复杂了。

前端面试Vue部分补充（详细）

小卡拉米的博客

01-13

1621

vue-router跳转可以实现单页应用的无刷新跳转，并且可以利用路由钩子进行一些额外的处理，而location.href则是传统的页面跳转方式，会导致页面的刷新。与MVC和MVP模式不同的是，MVVM模式中的视图模型充当了展示器的角色，并且视图和视图模型之间通过数据绑定实现了双向通信。与MVC模式不同的是，MVP模式中的展示器充当了控制器的角色，负责处理用户输入和更新模型和视图之间的通信。当在Vue中给data中的对象属性添加一个新的属性时，新添加的属性不会被Vue实例观察到，也不会触发视图的更新。

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

vant List组件实现上拉加载中首次进行load事件执行两次的问题

zuo-yiran的博客

07-06

3053

list组件上拉加载第一次加载去执行load事件时，该事件执行两次的问题解决

vue + vant 之 List列表组件首次不触发 onLoad 事件

weixin_47409897的博客

04-18

3446

目录vue + vant 之 List列表组件首次不触发 onLoad 事件 vue + vant 之 List列表组件首次不触发 onLoad 事件 immediate-check设置为flase即可 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" finished-text="没有

Vue | 利用slice()方法实现分页器

Albirostris

08-18

1357

vue

解决van-list分页太小首次加载两次的问题

natural_king的博客

10-09

1015

使用van-list分页，下拉翻页时，页面大小为5，初次加载页面，就会直接发送2次请求，直接请求了页码1，2两个页面。

vant下拉刷新，第一次进去，请求了两次

qq_37194812的博客

04-26

1086

<template> <div> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" offset="50" > <van-cell-group> <van-cell.

van-list 初始化加载2次

07-18

`van-list` 组件在初始化时会自动检测是否可以触发一次 `load` 请求，用于首次加载数据。如果此时页面内容不足以撑满可视区域（例如只有一两条数据），它会再次尝试触发 `load` 请求以补充更多数据。这种行为可能...

使用van-list做分页加载，但是列表里包含了图片懒加载，如何确保load事件触发

热门推荐

qq_34797972的博客

08-20

1万+

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

使用van-list切换tab重复请求

weixin_66892551的博客

04-26

1213

解决方法:在切换时设置loading为true防止触发onload并且发送完请求后设置loading为false,下拉时继续触发onload。问题:切换tab时会重新发送请求,同时因为没有数据会触发onload( ),导致发送两次请求,数据错乱。

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

weixin_49203377的博客

12-03

8554

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

vant中list用法与首次加载触发两次解决问题

weixin_47886687的博客

03-14

7427

以下是list的基本使用方法,主要原理就是当页面数据小于offset这个高度的时候,就会触发load,在load里面需要调用接口发送下一页的数据.所以发送完毕后需要将设置分页的属性加一,并将获取到的新值push进接收数据的数组里,而不是直接赋值,如果直接赋值那么数组里就只有新值,之前的值就被覆盖. 调用完以后将loading的样式关闭,并且判断数据库中还有没有数据,如果没有,就将finished为true,表示已经加载完毕了. 首次加载触发两次解决问题 1.在mounted或者create调用,原因是有.

使用 vant 的 List 组件的下拉加载更多时候，保证数据不满一屏也不会重复加载第一页的设置

qq_34576748的博客

03-09

3944

1.设置 immediate-check 为 false 2.设置 finished 默认为 true，代表已加载完即可解决 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="getXXXList" > e...

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

weixin_43666952的博客

06-11

2051

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

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

qq_43468165的博客

03-01

3843

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

vue-scroll，van-list苹果手机重复请求问题

此人很懒，什么都没有写

07-09

865

背景：做一个可下拉加载的数据列表，因为样式问题导致只使用van-list没办法触发loading，使用也是没效果，所以使用了vue-scroll包住了van-list。最近测试同事（IOS系统）发现下拉后加载的数据是重复的，而我在自己手机（安卓手机）怎么都重现不了，遂定位到IOS不兼容。