vant3 List 组件的一些坑

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.4k累计阅读 1.5k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄15年

关注

原创最新推荐文章于 2026-04-30 16:37:43 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

Vue3.0 + Vant 实战：打造高效列表页的下拉刷新与上拉加载功能本文详细介绍了如何在Vue3.0项目中，使用Vant组件库的van-pull-refresh和van-list组件，高效实现移动端列表页的下拉刷新与上拉加载功能。内容涵盖环境搭建、核心组件详解、实战避坑指南及性能优化技巧，帮助开发者打造流畅的列表交互体验。阅读详情

使用vant3 List 组件过程中遇到的一些坑

1、接口错误的时候，大量重复请求。

可能接口错误时vant3内部某些变量没重置，导致一直重复请求，解决方法是接口返回不成功finished设置成true

2、没有发起请求

<van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="getData"
    offset="50"
    v-if="!list || (list && list.length)"
 >
     <item v-for="info in list" :key="info.id" :info="info" />
 </van-list>

<script setup>
function getData(){
    if(loading.value || finished.value){
        return
    }
    // 接口请求....
}
</script>

有人可能跟我一样，习惯在数据请求方法中判断loading, vant 内部会对loading进行赋值，导致在调用方法前，loading为true，导致发不起请求。

收录于

当前文章被以下社区和专栏收录：

标签

#vue.js

【踩坑记】vant-ui中van-list组件手机滚动加载不生效或刚进页面就执行全部一直调接口踩坑，vant-ui中van-list组件手机滚动加载不生效或杠精页面就执行全部一直调接口阅读详情

相关推荐

APP开发-Vue3+vant实现数据列表下拉分页功能

一、需求分析 1、数据列表页面初始化显示十条数据，当用户下拉页面的时候会再自动请求十条数据，如果数据加载完成，显示提示信息’已经到底了’ 二、分页效果图从动图中我们可以看出页面在下拉的时候会自动触发数据请求，在右边的Network栏中，我们可以监测它是往后台发送请求的，而其currentPage代表的请求页数每次也会自动加一。三、后台分页逻辑当我们数据列表数据量大的时候，我们一般都会采用分页的展示。怎么样实现分页？首先，前台我们要告诉后台，我们需要请求第几页数据，并且把每页展示的数据量告诉我。

不觉晓晓的博客 4689

Vant List组件下拉加载的5个实战避坑点（附Vue3+TS完整代码）

本文详细解析Vant List组件在Vue3+TS项目中实现下拉加载时常见的5个实战问题，包括loading状态重置、immediate-check误用、数据合并竞态等，提供完整解决方案和代码示例。特别针对重复加载问题，给出避免首屏数据多次请求的最佳实践。

weixin_30755393的博客 337

vue3.0 + vant实现下拉刷新上拉加载

vue3.0 + vant实现下拉刷新上拉加载 @load事件不生效，在滚动的过程中，onLoad事件没有任何反应

chengcheng9876的博客 3333

记录一个van-list不断onLoad加载的坑

van-list 下拉的时候，不断请求后台加载数据，真的是坑。。。。 this.$http.post(url,params).then(function(res){ this.list=[]; if(res.data.data.length==0){ that.finished=true }else{ ...

编程技术分享，Java后端、Vue前端 1114

告别浏览器崩溃！EasyPlayer.js长时间播放FLV视频内存泄漏排查指南

本文针对EasyPlayer.js长时间播放FLV视频导致浏览器内存泄漏和崩溃的问题，提供了一套系统性排查与解决方案。核心策略包括将视频编码从H.265转为H.264以降低解码压力，以及将传输协议从HTTP-FLV切换至WebRTC以优化资源管理。文章还详细介绍了播放器实例生命周期管理、浏览器开发者工具监控等精细化排查手段，帮助开发者实现稳定、长时间的多路视频播放。

weixin_29229055的博客 167

5、OpenClaw（龙虾助手）飞书机器人完整对接指南（2026最新版）

OpenClaw v2026.2.2+ 版本，防火墙内也能正常工作，是目前最稳定、最简单的企业内部AI助手部署方案。

欢迎光临~知1而N的博客 452

vant-list列表有可能加载失败，如果不定义错误规则，可能会出现页面卡死的情况

vant-list列表有可能加载失败，如果不定义错误规则，可能会出现页面卡死的情况。 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> //对 onLoad()函数进行监控 .catch(error=>{ console.log(error); this.loading = false this.finished = true }) ..

weixin_48016008的博客 928

鸿蒙进阶——HDI及IDL硬件接口IPC框架小结

HDI（Hardware Device Interface）：OpenHarmony硬件设备接口，定义系统中跨进程通信的接口，实现服务间的跨进程通信

最美不过，心中有梦，身旁有你！ 3879

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

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

qq_45630675的博客 2546

25届电信保研经验贴（空天院）

学校：中九专业：电子信息工程加权：92.89绩点：3.91/4.0rank：前五学期rank2/95，综合排名rank1（前六学期和综合排名出的晚，实际上只用到了前五学期）科研竞赛：市级大创、数模省一、数竞省二，其他校奖若干英语：六级462、四级548个人感觉：rank=科研>竞赛>英语总之rank和科研必须得有一项，要么就rank高，很多强com院校入营看rank。我rank比较有优势，因此报的多是强com院校。要么就科研经历丰富，多主动联系老师，特别是弱com院校。冬令营：空天院。

qq_68608661的博客 6309

HRNet 【demo 复现过程】

Deep High-Resolution Representation Learning for Human Pose Estimation

qq_45257495的博客 5554

vant的list 一直请求数据,van-list 的load方法不断连续的调用方法请求数据，诡异现象。完整解决方案

橙-极纪元-JJYCheng 8159

RuoYi(分离版) 使用代码生成器添加子模块(idea版)

文章目录准备一、使用代码生成器1.数据库2.导入表并生成代码二、导入代码文件1.新建一个模块2.导入zip代码文件3.模块环境配置添加菜单和访问地址总结准备前提要把系统启动起来，部分教程可以参考这边文章若依框架RuoYi前后端分离项目导入IDEA及运行启动但是完全参考这篇文章还是不能把项目启动起来，因为这篇文章没有说明数据库。我是用的是本地数据库，采用xampp+Navicat的组合来部署和访问数据库。打开Navicat，连接并创建数据库ry-vue并导入数据脚本ry_20191008.sql，q

dream_coke的博客 1万+

关于vue上拉加载下拉刷新的问题

关于vue上拉加载下拉刷新的问题我们在使用vant组件使用list列表和PullRefresh下拉刷新的时候，可以组合起来使用上拉加载，下拉刷新这个一个特性我们在组件中的代码应该这样写,首先PullRefresh的标签在最外面，然后list列表的标签在里面<van-pull-refresh v-model="isLoading" @refresh="onRefresh"> ...

mengweizhao的博客 1849

CAN总线介绍及硬件设计

1. CAN是什么 CAN 是 Controller Area Network 的缩写（以下称为 CAN），是 ISO*1 国际标准化的串行通信协议。在当前的汽车产业中，出于对安全性、舒适性、方便性、低公害、低成本的要求，各种各样的电子控制系统被开发了出来。由于这些系统之间通信所用的数据类型及对可靠性的要求不尽相同，由多条总线构成的情况很多，线束的数量也随之增加。为适应“减少线束的数量”、“......

sinat_15677011的博客 9980

华为OD机试双机位C卷 - 比赛 / 评委评分 (C++ & Python & JAVA & JS & GO)

华为OD机试双机位C卷比赛，提供C语言、Java、C++、Python、Go、JavaScript源码实现，并提供完整思路讲解。华为OD机试-比赛，华为OD机考-比赛。

qq_45776114的博客 1694

vant3 中使用List组件的一些坑

Vant 是一个基于 Vue.js 框架的移动优先 UI 工具包。Vant 是一个基于 Vue.js 构建的轻量级移动 UI 组件库，它的设计易于使用和可定制，这使其成为构建移动应用程序的不错选择。Vant 提供了广泛的组件，包括按钮、表单、列表、模态框等，旨在与 Vue.js 无缝协作，帮助开发人员快速构建高质量、交互式的移动应用程序。Vant3 是 Vant 的最新版本，使用 TypeScript 构建，提供更稳定、更强的开发体验。

qq_38334677的博客 2193

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版【x86|x64】

使用Vant框架list组件遇到的坑

介绍 Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。特性提供 60 多个高质量组件，覆盖移动端各类场景性能极佳，组件平均体积不到 1kb（min+gzip）单元测试覆盖率 90%+，提供稳定性保障完善的中英文文档和示例支持 Vue 2 & Vue 3 支持按需引入支持主题定制支持国际化支持 TypeScript 支持 SSR 快速配置和具体介绍请去官

weixin_43805248的博客 5694

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具，可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

锂电池充电器电路设计里面有电路

锂电池充电器电路设计里面有电路 3.7V升压到5V电路设计。

vant3 list 的坑

paidaboluo的博客 1650

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册，内含HL7和ASTM)

app开发使用vant组件之van-list

本篇给那些初试app开发的码农，大佬如果有建议，欢迎留言~~首先开发app会有多种方式，html+各种框架，vue-cli脚手架+各种依赖。脚手架的话，直接在vant官网教程里就有,vant官网地址Vant 3 - Mobile UI Components built on Vue 上边是两种安装依赖方法，可自行去官网查看，这里有个问题需要说一下，vue3有可能你在创建项目的时候规定用es6写法，这个时候会报is notdefind，然后查找之后发现是vant里边有es5的写法，这个时候用npm unins

Qiubaozhen的博客 2436

vant中list列表组件使用

<van-list v-model="loading" // 是否显示正在加载状态 :finished="finished" // 是否已经加载完成 finished-text="没有更多了" // 加载完成提示文案 @load="onLoad" // 滚动条与底部距离offset时触发事件 offset="300" // 滚动条与底部距离offset时触发@load(默认.

weixin_55633731的博客 3277

vant list 组件总结

list组件注意事项 1 接口调用失败，会循环调用接口，解决办法加载失败需要处理 2 list请求一次要一满屏，不然会接着调用 3 接口请求反回停止的条件 1》加载失败 2》数据加载完成，再没有了 3》调用一次数据铺满全屏 isLoading: false, //下拉刷新 listLoading: false,//list加载 finis...

暖光的博客 1909

分析 vant4 源码，如何用 vue3 + ts 开发一个瀑布流滚动加载的列表组件？

2022年11月14日首发于掘金，现在同步到公众号。11. 前言大家好，我是若川。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推荐关注我写的专栏《学习源码整体架构系列》，目前是掘金关注人数（4.6k+人）第一的专栏，写有20余篇源码文章。我们开发业务时经常会使用到组件库，一般来说，很多时候我们不需要关心内部实现。但是如果希望学习和深究里面的原...

u012384510的博客 2133

vue-vant组件库

下载网易云音乐node接口项目, 在本地启动, 为我们vue项目提供数据支持项目地址备用地址下载后, 安装所有依赖, 在本地启动起来, 测试访问此地址是否有数据http://localhost:3000, 看到如下页面就成功了初始化工程下载需要的所有第三方依赖包引入reset.css和flexible.js - 实现样式初始化和适配问题 - 引入到main.js本次vant使用自动按需引入的方式文档: https://vant-contrib.gitee.io/vant/#/zh-CN/quic

延成的博客 810

Vant 库中如何给 List 列表组件的 cell 中左右两边来添加小图标？

Ⅰ、问题描述 1、Vant 中 List 列表的使用是方便且常用的，但如何给 List 组件中添加小图标而达到想要的效果呢？ 2、图例展示：其一、想要在 Vant 的 List 组件右边添加播放的小图标：其二、想要在 Vant 的 List 组件左边添加播放的小图标(当然：size 可以自己设置)： Ⅱ、问题实现过程： 1、用的 Vant 库及 List 列表组件的地址为：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/icon 2、左右