开发笔记:vue3+ts+vant 卡片数据分页,下拉加载,卡片左滑可删除

效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实现

使用vantui组件 van-swipe-cell + van-card (商品卡片)

核心代码

const currentPage = ref(1)
const pageSize = ref(4)
const totalSize = ref(10)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const checkList = ref([])
    <van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="nextPage"><van-swipe-cell style="margin-top: 10px"  v-for="item in checkList":key="item.artNo" :before-close="beforeClose"><van-card:thumb="item.masterUrl"><template #title><H4 style="text-align: left;float: left">自定义展示: 这是内容内容内容 </H4></template></van-card><template #right><van-button square text="删除" type="danger" class="delete-button" /></template></van-swipe-cell></van-list>
onMounted(() => {//获取图片库数据initGallery()})
const beforeClose = ({ position }) => {switch (position) {case 'left':case 'cell':case 'outside':return true;case 'right':return new Promise((resolve) => {showConfirmDialog({title: '确定删除吗?',}).then(() => resolve(true)).catch(() => resolve(false));});}
}
const initGallery = async () => {loading.value = true// useUserInfoStore.profilelet data = {pageNo: currentPage.value,pageSize: pageSize.value,artNo: artNo.value,styleAndSerial: serialAndStyle.value,// createUser}const res = await queryPagePicture(data);loading.value = falseconsole.log("获取图片库数据 ==", res)if (res.code == 200) {//如果下拉刷新,数据清空重新获取第一页if (refreshing.value) {checkList.value = []refreshing.value = false}totalSize.value = res.totalDatacheckList.value.push(...res.list)console.log("checkList",checkList.value)// 如果数据加载完毕,finished 标志位置为 true,滑到页面底部则不会再触发 nextPage() 方法了。// currentPage 重置为 1if (checkList.value.length >= totalSize.value) {finished.value = truecurrentPage.value = 1}}
}
const nextPage = async () => {loading.value = falsecurrentPage.value += 1await initGallery()
}
.delete-button {height: 100%;
}

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

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

相关文章

Git新仓库创建流程

平时需要创建新仓库,老要去查代码特别烦&#xff0c;在此写下流程方便备用. 1.创建新的云仓库 无论使用GitHub还是Gitee,首先要创建一个云仓库&#xff0c;这里就直接用国内的gitee做演示了&#xff0c;githup老挂加速器太烦&#xff0c;偷个懒. 我这里创建的是一个空仓库&…

java- Lambda表达式的实际应用

### 12. Lambda 表达式的实际应用 为了更好地理解和应用 Lambda 表达式&#xff0c;我们可以通过一些实际案例来展示其用法和优势。 #### 12.1 使用 Lambda 表达式进行事件处理 在 GUI 编程中&#xff0c;事件处理是一个常见的任务。使用 Lambda 表达式可以简化事件处理代码…

Nginx主配置文件---Nginx.conf

nginx主配置文件的模块介绍 全局块&#xff1a; 全局块是配置文件从开始到 events 块之间的部分&#xff0c;其中指令的作用域是 Nginx 服务器全局。主要指令包括&#xff1a; user&#xff1a;指定可以运行 Nginx 服务的用户和用户组&#xff0c;只能在全局块配置。例如&…

软考《信息系统运行管理员》-2.2 信息系统运维的组织

2.2 信息系统运维的组织 信息系统运维的任务 数据资源管理 数据收集、数据校验、数据录入、数据处理 软件资源管理 采购、保存、相关文档保管、分发、安装、支持、评价、培训 硬件资源管理 检查、维护、故障处理、更新、修复、扩充 系统安全管理 可用性、完整性、保密性、可控…

USB PD+TYPE -C快充电源中MOSFET选型,USB PD应用市场包含智能手机,平板电脑,笔记本电脑,游戏本,移动硬盘,数码相机,电动工具等传统领域

USB PD全称为USB Power Delivery&#xff0c;是由USB-IF组织制定的一种快速充电协议&#xff0c;也是目前市场非常看好的一种协议&#xff0c;可以支持输出功率高达100W&#xff1b;Type-C是一种接口规范&#xff0c;能够支持传输更大的电流。USB PD应用市场不仅包含智能手机&a…

虚拟纪念展馆建设的重大意义:重新定义纪念活动的未来

一、什么是虚拟纪念展馆&#xff1f; 虚拟纪念展馆是一种利用3D、VR等技术在线展示历史事件、人物或文化遗产的数字化空间。这些展馆通过虚拟现实、增强现实和3D建模等技术手段&#xff0c;创建出身临其境的体验&#xff0c;使参观者可以在互联网上以互动方式探索和学习。 二、…

【FPGA 学习与实践】<初阶> 项目周计划

第1-2周&#xff1a;基础项目 - 4位加法器和计数器 目标&#xff1a;掌握Verilog基本语法和模块设计。 第1周&#xff1a; 学习Verilog的基本语法和结构&#xff08;模块、端口、数据类型&#xff09;。设计并实现一个4位加法器。编写测试平台&#xff08;Testbench&#xff0…

提升效率就靠它们啦

Hey小伙伴们&#xff5e;&#x1f44b; 知道你们都在忙碌的工作中寻求高效的秘诀&#xff0c;今天就给大家安利五款超实用的国产工作App&#xff0c;让你的工作生活更加得心应手哦&#xff01;&#x1f4bc;✨ 1️⃣【亿可达】 作为一款自动化工具&#xff0c;亿可达被誉为国内…

firewalld(5)--direct

简介 direct 是 firewalld 服务的一个功能&#xff0c;它允许用户以更直接的方式配置防火墙规则&#xff0c;绕过通常的 firewalld 区域&#xff08;zone&#xff09;和服务的抽象层。然而&#xff0c;这个功能已经被弃用&#xff08;deprecated&#xff09;&#xff0c;并将…

详解位运算(、|、^、^、>>、<<)

十六进制与二进制对应关系 十六进制和二进制之间的转换非常直接&#xff0c;每个十六进制数字直接对应四个二进制位&#xff0c;并且十六进制相对二进制要更加简洁&#xff0c;因此通常书写位操作的代码时会选择使用十六进制来表示数值。 为了方便快速阅读涉及位运算的源码&a…

深入探索Scala的类型推断机制

引言 Scala是一种静态类型编程语言&#xff0c;以其强大的类型推断系统而闻名。类型推断允许开发者在很多情况下省略显式的类型声明&#xff0c;从而编写更简洁、更少出错的代码。本文将深入探讨Scala的类型推断是如何实现的&#xff0c;以及它如何帮助提高开发效率和代码可读…

萌啦跨境工具箱有什么作用,萌啦跨境工具箱OZON营销神器

萌啦OZON数据平台&#xff0c;作为专为OZON平台商家打造的数据分析工具&#xff0c;集成了多种强大功能&#xff0c;旨在帮助商家在激烈的市场竞争中获得数据驱动的优势&#xff0c;实现精准运营与高效增长。那么萌啦跨境工具箱有什么作用&#xff1f;接下来介绍萌啦跨境工具箱…

全面升级厨房安全,电焰灶引领新时代

煤气是许多家庭日常使用的能源&#xff0c;目前的普及率还是比较高的&#xff0c;但平时因煤气泄漏而引发的事故也很多&#xff0c;只需要查看最近一个月因液化气泄漏引起的爆炸事件屡见不鲜。打开新闻&#xff0c;我们总能时不时看到煤气爆炸的事故&#xff0c;幸运的能够逢凶…

代码随想录算法训练营day70 | 108. 冗余连接、109. 冗余连接II

本次题目都来自卡码网 108. 冗余连接 无向图&#xff0c;返回一条可以删去的边&#xff0c;使得结果图是一个有着N个节点的树&#xff08;即&#xff1a;只有一个根节点&#xff09;。 从前向后遍历每一条边&#xff08;因为优先让前面的边连上&#xff09;&#xff0c;边的…

【2024LLM应用-数据预处理】之如何从PDF,PPT等非结构化数据提取有效信息(结构化数据JSON)?

&#x1f970;大家知道吗,之前在给AI大模型"喂数据"的时候,我们往往需要把非结构化数据(比如PDF、PPT、Excel等)自己手动转成结构化的格式,这可真是太累人儿了。&#x1f975; 幸好现在有了Unstructured这个神级库,它内置的数据提取函数可以帮我们快速高效地完成这个…

ubuntu 安装并启用 samba

环境&#xff1a;ubuntu server 24.04 步骤如下&#xff1a; sudo apt update sudo apt install samba修改配置文件&#xff1a; sudo vi /etc/samba/smb.conf新增内容&#xff1a; [username]path /home/[username]available yesvalid users [username]read only nobrow…

[Information Sciences 2023]用于假新闻检测的相似性感知多模态提示学习

推荐的一个视频&#xff1a;p-tuning P-tunning直接使用连续空间搜索 做法就是直接将在自然语言中存在的词直接替换成可以直接训练的输入向量。本身的Pretrained LLMs 可以Fine-Tuning也可以不做。 这篇论文也解释了为什么很少在其他领域结合知识图谱的原因&#xff1a;就是因…

什么是客户体验自动化?

客户体验自动化是近年来在企业界备受关注的一个概念。那么&#xff0c;究竟什么是客户体验自动化呢&#xff1f;本文将为您详细解析这一话题&#xff0c;帮助您更好地理解并应用客户体验自动化。 我们要先明确什么是客户体验。客户体验是指客户在使用产品或服务过程中的感受和体…

Android SQLite 数据库存学习与总结

Android 系统内置了一个名为 SQLite 数据库。那么 SQLite 是一种什么样的数据库&#xff0c;它有那些特点&#xff0c;应该怎么操作它&#xff1f;下面&#xff0c;让我们就来认识一下它吧。 1、概念&#xff1a; SQLite 是一种轻量级的关系型数据库&#xff0c;它不仅支持标准…

elementPlus自定义el-select下拉样式

如何在f12元素选择器上找到下拉div呢&#xff1f; 给el-select添加 :popper-append-to-body"false" 即可&#xff0c;这样就可以将下拉框添加到body元素中去&#xff0c;否则当我们失去焦点&#xff0c;下拉就消失了&#xff0c;在元素中找不到el-select。剩下就可以…