vue+vant 上拉加载下拉刷新

最新推荐文章于 2023-09-12 19:49:03 发布
最新推荐文章于 2023-09-12 19:49:03 发布
阅读量312 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39750019/article/details/118334736
版权

1.HTML
在这里插入图片描述
2.JS
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
为什么会连续触发 load 事件？
如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数，理想情况下每次请求获取的数据条数应能够填满一屏高度。

junjun.chen0606
关注
专栏目录
VUE+Vant实现下拉刷新和上拉加载
marsur的博客
09-18 9313
使用Vant的PullRefresh组件和List 组件 <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" @load="onLoad" :offset="10" ...
vue+vant 上拉加载，下拉刷新
ylp的博客
06-24 3673
<template> <div class="container"> <van-pull-refresh v-model="refreshing" @refresh="onDownRefresh"> <van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="..
h5的vue项目vantUI--tab切换或者筛选条件时上拉加载不触发上拉load事件
qq_41621896的博客
03-02 2204
最近利用vue和vantUI写h5的项目，遇到的问题总结： 问题：vantUI–tab切换或者筛选条件时上拉加载不触发上拉load事件 loading为false是加载中，finished为true是已结束状态，onLoad是执行函数（分页添加list的值） 这是我的页面 created () { this.getDataList('COMPREHENSIVE', 0) //记得第一次...
vue 移动端vant下拉加载和上拉刷新
weixin_44134816的博客
08-08 331
vue 移动端vant下拉加载和上拉刷新。
使用vantui的van-list，上拉只能加载一次问题总结
m0_37655944的博客
10-22 1970
van-list @load方法只生效一次 经给仔细的检查和阅读官方给的介绍，找到了根本原因 每一次@load里面方法执行完毕，loading这个参数就会变成true所以就不会再次发送请求了，所以每次异步请求了数据，如果还有数据需要把loading的状态改成false getList(){ var that = this; let query = this.query query.user_location = this.user_location getE
vue 实现下拉在加载 上拉加载刷新
Crazy_Cw的博客
01-14 1002
话不多说，直接看代码； 一；引入插件：   将这个放在componets组件文件下面 &lt;template lang="html"&gt; &lt;div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}" ...
Vue vant 上拉加载 下拉刷新实际案例源码模板
05-18
在这个"Vue vant 上拉加载 下拉刷新实际案例源码模板"中，我们将探讨如何使用 Vant 的上拉加载（LoadMore）和下拉刷新（PullRefresh）功能来增强用户体验。 1. **Vant LoadMore组件**： Vant 的 LoadMore 组件主要...
Vue+Vant+SSM图书管理系统设计
03-11
4 客户端列表页实现了下拉刷新，上拉加载更多分页显示，文件上传，富文本编辑器，图片懒加载，Token访问令牌生成！ 基于Vue图书管理app实体对象： 图书类型：图书类别，类别名称，可借阅天数 图书：图书条形码，...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
10-15
在这个教程中，我们将探讨如何使用Vue实现一个包含网络图片瀑布流、下拉刷新和上拉加载更多功能的组件。首先，我们需要理解瀑布流布局的基本概念，它是通过绝对定位使得元素按列排列，形成一种自适应的网格效果。 1...
van-list 下拉刷新 触底分页 触底分页事件只加载一次
最新发布
m0_59006402的博客
09-12 1116
我是 头部是筛选的条件，，更换不同的状态，显示不同的列表数据，比如 审批中数据是 对的，触底分页也是对的，如果我切换一个状态的话，总共是 15条数据，但是 切换了状态只显示第一页的数据（我设置的是一页十条数据）loading 设置为false 是因为 加载过程中 也就是 loading 是true的时候，不触发load 事件。解决触底事件只监听一遍的方法： 就是给 切换搜索条件以及 下拉刷新函数加如下两行代码。这种写法 有的浏览器支持，有的浏览器不支持，一开始以为是 浏览器内核的原因。
vue 使用vant插件做tabs切换和无限加载功能的实现
01-18
样例： 1.创建vue项目，不再详述 2.引入vant 之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了，大家可以借鉴，看源代码可能比官方给的文档更直观 官方文档 我在文件中的使用，没有使用下拉刷新的功能，大家可以直接看官网代码： <template> <div
vant 中的SwipeCell踩坑 onLoad 不触发的问题 List 列表 上拉加载
baidu_39040364的博客
05-05 7602
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <van-cell v-for="item in list" :key="item" :title="item" /> </van-list>
使用van-list只能加载一次的原因
qq_40462272的博客
03-29 1153
父元素或祖先元素设置了overflow属性，把该属性去掉即可。
关于Vant-list 上拉加载以及下拉刷新问题
qq_38098424的博客
02-07 5711
关于Vant-list 上拉加载以及下拉刷新问题 第一步引入 import { Notify, Dialog, Image, List, PullRefresh } from 'vant' import Vue from 'vue' Vue.use(Image).use(List).use(PullRefresh) 第二步 <van-pull-refresh v-model="refres...
解决：Vant[v2.8.3] NoticeBar 只滚动一次
weixin_44134899的博客
01-13 1173
场景： 使用Vant插件的NoticeBar组件，在浏览器中正常，但在ios微信上只滚动一次。 解决： 更新Vant包。 经过官网查看源码： 最新版本[v2.12.3]的滚动结束事件中，重新开始命令的注释中解释： // using nextTick won’t work in iOS14 而我用的版本中，用的就是$nextTick监听的，测试的系统为ios14。 后将Vant包更新成了最新版本后解决。 ...
vant vant-list碰到的坑
liuyalu_的博客
04-27 8335
vant vant-list碰到的坑 最近新写的项目都是碰见了这个问题 onload在加载时只触发一次，还是在刚进页面是触发一次，页面向下滚动时，onload并不加载 （本人所尝试的解决方案） 我在data里定义loading为false，但是在触发加载时这个并不执行，所以我在请求数据里又定义一遍loading为false 在onload里触发加载更多数据 在mounted里加载数据 ...
关于vant滚动事件踩坑记-上拉加载，下拉刷新
Nancy的博客
06-22 2188
vue之vant框架的list上拉加载和下拉刷新
Vant list 与better-scroll与下拉刷新（其实是上拉加载）
热门推荐
HYeeee的博客
10-02 1万+
先是用了vant的LIst下拉刷新，然后发现better-scroll中这个插件没有用，然后自己写了个监听！最后发现一篇文章有封装scroll中下拉刷新！这个过程也是莫名其妙了。 1、首先是用了Vant的List实现 Vant List官网 这部分就是官网的例子修改了点。注意一个参数：immediate-check 是否在初始化时立即执行滚动位置检查，默认是true，就在created的时候就执...
vant-list和vant-tab组合使用触发load无限加载
qq_43378083的博客
11-18 2715
tab中不同页的数据用同一个数组时，不要一次性请求好数据后放数组里面，然后tab切换的时候本地去判断处理，这样如果一个tab页中没有数据，或者数据没有铺满屏幕时，vant-list的load事件会一直去请求接口拿数据，知道屏幕铺满为止。不同的tab页的数据可以放一个数组中，但是每次切换不同tab都要去重新请求接口，拿到不同的值去赋予数组，不要把所有tab的数据拿到后本地处理！
vant上拉加载下拉刷新
06-02
vant是一个基于 Vue.js 的移动端组件库，它提供了一些非常方便的组件，包括下拉刷新和上拉加载。如果你想在你的项目中使用 vant 的下拉刷新和上拉加载功能，可以按照以下步骤进行： 1. 安装 vant 组件库 在项目中安装 vant 组件库，可以使用 npm 或者 yarn 进行安装。你可以在终端中执行以下命令进行安装： ``` npm install vant -S ``` 或者 ``` yarn add vant ``` 2. 引入 vant 组件 在你的 Vue 组件中引入 vant 组件，你需要在你的组件中添加以下代码： ``` import { PullRefresh, List } from 'vant'; export default { components: { [PullRefresh.name]: PullRefresh, [List.name]: List }, data() { return { ... }; }, ... } ``` 在这里，我们引入了 vant 的`PullRefresh`和`List`组件。 3. 添加下拉刷新和上拉加载功能 在你的 Vue 组件中添加以下代码，以启用下拉刷新和上拉加载功能： ``` <template> <div> <van-list v-model="list" :finished="finished" @load="onLoad" :offset="200" > <template #header> <van-pull-refresh v-model="refreshing" @refresh="onRefresh" /> </template> <template #item="{ item }"> <div class="item">{{ item }}</div> </template> </van-list> </div> </template> <script> export default { data() { return { list: [], refreshing: false, finished: false }; }, methods: { onRefresh() { setTimeout(() => { this.list = ['1', '2', '3', '4', '5']; this.refreshing = false; }, 1000); }, onLoad() { // 在这里添加上拉加载的逻辑 } } }; </script> ``` 在这里，我们使用了 vant 的`List`组件和`PullRefresh`组件。我们在`List`组件上添加了`@load`事件，当滑动到底部时将会触发该事件。在`PullRefresh`组件上添加了`@refresh`事件，当下拉刷新时将会触发该事件。 你需要在`onLoad`方法中添加上拉加载的逻辑。在该方法中，你可以通过异步操作从服务端获取更多的数据，并将其添加到列表中。 以上就是使用 vant 实现下拉刷新和上拉加载的步骤。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值