2023-解决vant的list中上拉加载多次调用接口问题

于 2023-12-09 18:29:20 发布
阅读量180 收藏
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34070719/article/details/134898764
版权

其实只需要给vant的list配置一个属性就好了
就是offset
可以设置offset=10

闲云野鹤_物竞天择
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant list列表页点击搜索删选，load方法触发多次
qq_40685103的博客
03-07 791
vant list列表页点击搜索删选，load方法触发多次
Vue vant 上拉加载 下拉刷新实际案例源码模板
05-18
vant 上拉加载 下拉刷新实际案例源码模板。你可以用请求的数据放到模板里面可以直接使用，不需要改啥，只需要复制，粘贴 就 o j b k 了。
vant组件库中使用van-list组件中load加载事件触发多次的问题
weixin_49203377的博客
12-03 5533
背景：在使用vant UI组件库的时候，当列表加载到底部的时候，可以结合load加载事件，继续获取下一页的数据 但是和tab切换结合的时候，就会出现问题了，比如第一个tab下面我进行了忘下滑动的滚动事件，然后我再切换到第二个tab下面，这时候，又会自动执行了一遍加载事件（感觉1.应该是刚开始没有数据，然后直接到底部了，所以唤起了load事件2.第一个列表由于往下滑动了，所以滚动条还在刚才滑动下去的位置，所以直接到底了又触发了load加载事件） 所以针对这两个问题 做了以下处理 1.首先页面上 loa
vant-list上拉加载onload事件触发多次
热门推荐
weixin_45121510的博客
10-14 1万+
场景：3个tab页签切换时，调用不同接口，在某一个tab只要翻页到>=2的情况，当它再点击到另一个tab的时候，另外一个tab就会连续调用两次查询接口
van-list的onload事件多次触发的问题
最新发布
老电影故事的博客
12-04 1516
这个问题的原因是当元素设置了 overflow-x: hidden 样式时，该元素的 overflow-y 会被浏览器设置为 auto，而不是默认值 visible，导致 List 无法正确地判断滚动容器。如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。如图所示，页面刷新的时候，调了3次接口（总共27条数据，我分页10条），一直莫名奇妙的。原来是这个overFlow的问题！
解决vant列表刷新，接口调用多次
weixin_51140082的博客
11-23 318
onLoading默认为false，为false，才会调用接口,开始调接口将onLoading改为true，等到执行完再改为false// 请求数据列表})
vant 中van-list的用法说明
01-18
van-list里面的元素不能有float样式，否则会连续触发 load 事件 原代码 <van v-model=active change=getTypeDate> <van v-for=(tab) title=tab.name key=tab.id> <div xss=removed class=pic-content> <...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
11-21
最近由于公司项目需要，用vue写了几个简单的...就是list组件做上拉加载只有在第一个tab会触发，切换后触底不会再次触发 解决办法： 初始化定义了list的加载状态 tab切换时；重新初始化一次就行了 这样就解决了tab切换
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
vant的list 一直请求数据,van-list 的load方法不断连续的调用方法请求数据，诡异现象。完整解决方案
橙-极纪元-cplvfx-JJY.Cheng
01-31 5515
vant的list 一直请求数据,van-list 的load方法不断连续的调用方法请求数据，诡异现象。完整解决方案
vant-list使用，请求接口之后会多几次load加页面
qq_43468165的博客
03-01 2288
5页（极端假设）的情况下，如果你的内容小于了可是窗口，第一导致load不能触发，第二侥幸可视窗口高度本来就小，能滚到底load触发了，你可能在tab0的时候成功获取了page=2的内容了，但在切换tab时候就开始不受控值乱掉接口了。是因为产品在设置时候是会考虑到，触底加载事件的触发的。那上面描述这种情况，tab切换了，又进行自动加载数据的情况前端就不要想着制止了（更全面的来说，可控但是真没必要前端增加额外参数来控制了），因为van-list 也是害怕你填不满页面，实现不了下一步滚动在帮你加载充足数据上来。
vant-List-@load事件一直触发
Delete_89x的博客
11-12 4394
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obta
vant-list和vant-tab组合使用触发load无限加载
qq_43378083的博客
11-18 2591
tab中不同页的数据用同一个数组时，不要一次性请求好数据后放数组里面，然后tab切换的时候本地去判断处理，这样如果一个tab页中没有数据，或者数据没有铺满屏幕时，vant-list的load事件会一直去请求接口拿数据，知道屏幕铺满为止。不同的tab页的数据可以放一个数组中，但是每次切换不同tab都要去重新请求接口，拿到不同的值去赋予数组，不要把所有tab的数据拿到后本地处理！
vant List 列表组件分页加载更多关于清空数据后多触发一次网络请求问题
weixin_45965766的博客
04-21 474
切换查询分类或搜索等场景需要先把原来的数据项清空,这时如果已不是第一页数据清空后List组件会触发触底load事件,在@load中写的网络请求就会执行,加上自己主动调用的请求就多了一次,这里加上this.loading = true阻止触发load事件。配置immediate-check为false可以阻止初始化时立即执行滚动位置检查触发load事件。
vant-list上滑加载，数据重复，加载后返回顶部，或者不加载更多数据
qq_42440919的博客
11-17 3616
list上拉加载
vant组件list上拉刷新加载的问题
m0_46577631的博客
09-17 2009
vant组件list的一些问题
vant ui中 pullRefresh+list与tabs相结合使用导致一直触发load的一种比较简单的解决办法
weixin_44492275的博客
11-02 880
办法: `不把van-pull-refresh以及van-list放在van-tab标签当中`其原因可能是在tab里定位 触底判断有问题
【vant】van-list的滚动加载onload事件
i_am_a_div的博客
12-15 3145
【vant】van-list的滚动加载onload事件
vant实现下拉刷新和上拉加载_移动端：vant-list 实现下拉刷新，上拉加载功能
06-03
好的，针对您的问题，下面是vant-list实现下拉刷新和上拉加载的方法： 1. 安装vant 首先需要在项目中安装vant，可以通过npm或yarn进行安装： npm install vant --save 或者 yarn add vant 2. 引入vant 在需要使用vant的页面中引入vant： import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3. 使用vant-list 在页面中使用vant-list组件，用于展示列表数据： <van-list :finished="finished" @load="onLoad" @refresh="onRefresh"> <!-- 列表项 --> </van-list> 其中，@load和@refresh分别是上拉加载和下拉刷新的事件，finished用于控制是否已加载完所有数据。 4. 实现下拉刷新 在页面的methods中定义onRefresh方法，用于处理下拉刷新事件： export default { data() { return { list: [], // 列表数据 page: 1, // 当前页码 pageSize: 10, // 每页数据数量 finished: false // 是否已加载完所有数据 }; }, methods: { async onRefresh() { this.page = 1; // 下拉刷新时重置页码 this.list = []; // 清空列表数据 await this.loadData(); // 加载数据 this.finished = false; // 重置finished状态 }, async loadData() { // 根据当前页码和每页数据数量加载数据 const data = await api.getList(this.page, this.pageSize); if (data.length > 0) { this.list = this.list.concat(data); // 将数据添加到列表中 this.page++; // 页码+1 } else { this.finished = true; // 已加载完所有数据 } } } }; 5. 实现上拉加载 在页面的methods中定义onLoad方法，用于处理上拉加载事件： export default { data() { return { list: [], // 列表数据 page: 1, // 当前页码 pageSize: 10, // 每页数据数量 finished: false // 是否已加载完所有数据 }; }, methods: { async onRefresh() { this.page = 1; // 下拉刷新时重置页码 this.list = []; // 清空列表数据 await this.loadData(); // 加载数据 this.finished = false; // 重置finished状态 }, async onLoad() { if (this.finished) return; // 如果已加载完所有数据则直接返回 await this.loadData(); // 加载数据 }, async loadData() { // 根据当前页码和每页数据数量加载数据 const data = await api.getList(this.page, this.pageSize); if (data.length > 0) { this.list = this.list.concat(data); // 将数据添加到列表中 this.page++; // 页码+1 } else { this.finished = true; // 已加载完所有数据 } } } }; 通过以上步骤，就可以实现vant-list的下拉刷新和上拉加载功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值