014:vue3 van-list van-pull-refresh实现上拉加载,下拉刷新

文章目录

  • 1. 实现上拉加载,下拉刷新效果
  • 2. van-list,van-pull-refresh组件详解
    • 2.1 van-list组件
    • 2.2 van-pull-refresh组件
  • 3. 完整案例
  • 4. 坑点:加载页面会一直调用加载接口

1. 实现上拉加载,下拉刷新效果

  1. 通过下拉刷新加载下一页接口
    请添加图片描述

2. van-list,van-pull-refresh组件详解

  1. Vant 是一个轻量、可靠的移动端组件库,使用该框架的 van-list 组件和 van-pull-refresh 组件可实现上述功能
  2. 在移动端项目开发中有列表页面开发,需要实现上拉加载下一页数据下拉刷新页面

2.1 van-list组件

用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。用该组件可实现上拉加载
List 组件通过 loadingfinished 两个变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据,数据更新完毕后,将 loading 设置成 false 即可。若数据已全部加载完毕,则直接将 finished 设置成 true 即可

<van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"
><van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
onLoad() {// 异步更新数据// setTimeout 仅做示例,真实场景中一般为 ajax 请求setTimeout(() => {for (let i = 0; i < 10; i++) {this.list.push(this.list.length + 1);}// 加载状态结束this.loading = false;// 数据全部加载完成if (this.list.length >= 40) {this.finished = true;}}, 1000);}

2.2 van-pull-refresh组件

下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 v-model 设置为 false,表示加载完成。

<van-pull-refresh v-model="isLoading" @refresh="onRefresh"><p>刷新次数: {{ count }}</p>
</van-pull-refresh>
onRefresh() {setTimeout(() => {Toast('刷新成功');this.isLoading = false;this.count++;}, 1000);}

3. 完整案例

<template><div class="main"><van-pull-refreshv-model="refreshing"@refresh="onRefresh"loosing-text="释放即可刷新"pulling-text="下拉刷新"><van-listv-model:loading="loading":finished="finished"finished-text="没有更多了"loading-text="加载中..."@load="onLoad"><divv-for="(_item, index) in listData":key="index"class="wallet"><div class="content">.....内容</div></div></van-list></van-pull-refresh></div>
</template>
<script setup lang="ts">
import { Async_cashList } from "@/server/user";
const listData = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const pageParams = ref({page: 0,size: 20
});const onLoad = () => {if (refreshing.value) {listData.value = [];refreshing.value = false;}getList();
};const onRefresh = () => {pageParams.value.page = 0;listData.value = [];refreshing.value = false;finished.value = false;loading.value = true;getList();
};const getList = async () => {try {let { list }: any = await Async_cashList({page: pageParams.value.page,size: pageParams.value.size,});loading.value = false;if (!list) {// 如果返回数据为空,表示已加载完成finished.value = true;} else {listData.value = listData.value.concat(list);pageParams.value.page++;}} catch (error) {console.error(error);} finally {loading.value = false;}
};</script>
<style scoped lang="scss">
.main {width: 100%;padding: 12px;height: 100vh;
}.wallet {display: flex;justify-content: flex-start;margin-bottom: 6px;.content {width: 100%;display: flex;flex-direction: column;align-items: center;background: #11202f;padding: 12px;border-radius: 6px;}
}
</style>

4. 坑点:加载页面会一直调用加载接口

  1. 开发中遇到一个坑点,就是不管怎么调页面都是默认一进去会加载完所有的请求,比如一页有20条,一共100条,就会执行5次接口,请求完数据,如下所示

请添加图片描述

  1. 这并不是我们想要的,我们要的是进去加载第一页,根据手动下拉去加载剩余的数据,下面的方式可解决

需要设置页面的固定高度,van-list需要验证页面是否触底,如果没用触底,就会继续加载页面,触底了就不会继续调用接口了

.main {width: 100%;padding: 12px;height: 100vh; // 就是这行加一个固定的高度即可
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/811773.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

淘宝扭蛋机小程序:扭出惊喜,乐享购物新体验

在快节奏的现代生活中&#xff0c;人们总是在寻找新鲜、有趣的娱乐方式。淘宝扭蛋机小程序应运而生&#xff0c;为您带来前所未有的购物与娱乐结合新体验。在这里&#xff0c;每一次的扭动都充满惊喜&#xff0c;每一次的点击都带来乐趣&#xff0c;让您在购物的同时&#xff0…

4.Labview簇、变体与类(上)

在Labview中&#xff0c;何为簇与变体&#xff0c;何为类&#xff1f;应该如何理解&#xff1f;具体有什么应用场景&#xff1f; 本文基于Labview软件&#xff0c;独到的讲解了簇与变体与类函数的使用方法和场景&#xff0c;从理论上讲解其数据流的底层概念&#xff0c;从实践上…

汽车维修类中译英的英语翻译

近年来&#xff0c;随着全球化的加速和汽车市场的不断扩大&#xff0c;汽车维修领域的交流与合作也日益频繁。汽车维修类中译英的英语翻译在汽车行业中扮演着至关重要的角色。那么&#xff0c;针对汽车维修类翻译&#xff0c;中译英的英语翻译有何技巧&#xff1f; 业内人士指出…

Linux 系统解压缩文件

Linux系统&#xff0c;可以使用unzip命令来解压zip文件 方法如下 1. 打开终端&#xff0c;在命令行中输入以下命令来安装unzip&#xff1a; sudo apt-get install unzip 1 2. 假设你想要将zip文件解压缩到名为"target_dir"的目录中&#xff0c;在终端中切换到目标路…

C#/.NET/.NET Core拾遗补漏合集(24年4月更新)

前言 在这个快速发展的技术世界中&#xff0c;时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NET Core拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节&#xff0c;以帮助大家更全面地了解这些技术栈的特性和发展方向。 GitHub开源地…

Java中的单元测试Junit框架

单元测试 概述与以往的测试比较 Junit框架快速入门优点测试步骤断言机制 自动化测试 Junit框架常见注解 概述 针对最小的功能单元&#xff08;方法&#xff09;&#xff0c;编写测试代码对其进行正确性测试 与以往的测试比较 只能在main方法编写测试代码&#xff0c;去调用其…

Python实现PDF页面的删除与添加

在处理PDF文档的过程中&#xff0c;我们时常会需要对PDF文档中的页面进行编辑操作的情况&#xff0c;如插入和删除页面。通过添加和删除PDF页面&#xff0c;我们可以增加内容或对不需要的内容进行删除&#xff0c;使文档内容更符合需求。而通过Python实现PDF文档中的插入和删除…

微服务学习 Eureka注册中心

服务调用时候出现问题&#xff0c;当服务者很多时候&#xff0c;比如不同的端口。消费者如何找到服务者的地址&#xff1f;又如何判断服务者是否健康。 Eureka基本原理&#xff1a; 总结:如果有多个服务提供者&#xff0c;消费者该如何选择&#xff1f; 搭建Eureka注册中心: 1.…

LeetCode-72. 编辑距离【字符串 动态规划】

LeetCode-72. 编辑距离【字符串 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;动规五部曲解题思路二&#xff1a;动态规划【版本二】解题思路三&#xff1a;0 题目描述&#xff1a; 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最…

找出mongodb的jumbo块并进行分裂

https://www.cnblogs.com/abclife/p/15968628.html 根据这篇文档中的脚本&#xff0c;在我们自己的环境中跑了下&#xff0c;第一次跑的结果如下&#xff1a; 运行完上面跑出的split脚本后&#xff0c;还是存在jumbo块&#xff0c;第二次跑出的结果&#xff1a; 从上面结果可以…

PostgreSQL15 + PostGis + QGIS安装教程

目录 下载1、PostgreSQL安装1.1、环境变量配置 2、PostGIS安装2.1、安装插件 3、QGIS下载3.1、安装3.2、测试 下载 PostgreSQL15安装&#xff1a;下载地址 PostGIS安装&#xff1a;下载地址&#xff08;倒数第二个&#xff09; 1、PostgreSQL安装 下载安装包之后一直点下一步…

Python 版分布式消息队列 Kafka 实现图片数据传输

1、Kafka 介绍 在使用 Kafka 之前&#xff0c;通常需要先安装和配置 ZooKeeper。ZooKeeper 是 Kafka 的依赖项之一&#xff0c;它用于协调和管理 Kafka 集群的状态。 ZooKeeper 是一个开源的分布式协调服务&#xff0c;它提供了可靠的数据存储和协调机制&#xff0c;用于协调…

清远某国企IBM服务器Board故障上门维修

接到一台来自广东清远市清城区某水利大坝国企单位报修一台IBM System x3650 M4服务器无法开机的故障&#xff0c;分享给大家&#xff0c;同时也方便有需要的朋友能及时找到我们快速解决服务器问题。 故障服务器型号&#xff1a;IBM System x3650 M4 服务器使用单位&#xff1a;…

厂区3D全景线上漫游体验突破现实时空阻碍

智慧园区&#xff0c;作为现代城市发展的重要引擎&#xff0c;其管理效率和安全监控的需求日益凸显。而720VR全景展示技术的引入&#xff0c;无疑为智慧园区的建设注入了新的活力。通过360全空间无死角的视觉展示&#xff0c;用户可以身临其境地感受园区的每一个角落&#xff0…

记账本|基于SSM的家庭记账本小程序设计与实现(源码+数据库+文档)

家庭记账本小程序目录 基于SSM的家庭记账本小程序设计与实现 一、前言 二、系统设计 三、系统功能设计 1、小程序端&#xff1a; 2、后台 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大…

【opencv】示例-imagelist_reader.cpp 读取YAML格式文件中的图片列表,并逐个显示这些图片的灰度图...

这段代码的功能是使用OpenCV库读取一个YAML或XML格式文件中的图片列表&#xff0c;并且逐个地在窗口中以灰度图像的形式显示这些图片。用户可以按任意键来查看下一张图片。程序提供了帮助信息输出&#xff0c;指导用户如何使用该程序。此外&#xff0c;它使用命令行参数解析器来…

(文章复现)考虑网络动态重构的分布式电源选址定容优化方法

参考文献&#xff1a; [1]朱俊澎,顾伟,张韩旦,等.考虑网络动态重构的分布式电源选址定容优化方法[J].电力系统自动化,2018,42(05):111-119. 1.摘要 以投资周期经济收益最高为目标&#xff0c;基于二阶锥规划提出了一种考虑网络动态重构的分布式电源选址定容优化方法。首先&am…

毅四捕Go设计模式笔记——责任链模式

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09; 为了解决什么问题&#xff1f; 责任链模式的目的是为了将请求的发送者和接收者解耦。它允许多个处理器都有机会处理请求&#xff0c;将这些处理器连接成一条链&#xff0c;并沿着这条链传递请求&#xff…

Linux磁盘空间问题排查记录

问题 pip install时总提示OSError(28, ‘No space left on device’)或者ERROR: Could not install packages due to an OSError: [Errno 28] No space left on device 分析 很明显&#xff0c;磁盘空间不足。尝试了以下方法&#xff0c;没有解决问题&#xff1a; 清理pip缓…

给现有rabbitmq集群添加rabbitmq节点

现有的&#xff1a;10.2.59.216 rabbit-node1 10.2.59.217 rabbit-node2 新增 10.2.59.199 rabbit-node3 1、分别到官网下载erlang、rabbitmq安装包&#xff0c;我得版本跟现有集群保持一致。 erlang安装包&#xff1a;otp_src_22.0.tar.gz rabbitmq安装包&#xff1…