当前位置: 首页 > news >正文

移动端Vant-list的二次封装,查询参数重置

Vant-list的二次封装

场景:在写项目需求的时候,移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜索和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便,所以封了一层。

二次封装代码

<template><van-listv-model:loading="loading":finished="finished"@load="handleLoad"><div :class="listClass"><slotv-for="item in listData":key="item.id"v-bind="item"/></div><div v-if="loadOnce && !listData?.length" class="layout-list__empty">暂无数据</div></van-list>
</template><script setup>
const props = defineProps({request: {},listClass: {},pageSize: {type: Number,default: 10,},
});const listData = ref([]);
const loading = ref(false);
const finished = ref(false);
const loadOnce = ref(false);let pageNum = 0;
let requesting = false;const handleLoad = async () => {if (requesting || unref(finished)) { return }requesting = true;++pageNum;const formContent = {page: pageNum,pageSize: props.pageSize,};const { total, data } = await props.request(formContent);unref(listData).push(...data);loadOnce.value = true;if (!unref(listData).length || unref(listData).length >= total) {finished.value = true;}loading.value = false;requesting = false;
};const resetSearch = () => {listData.value = [];loading.value = false;finished.value = false;loadOnce.value = false;pageNum = 0;requesting = false;handleLoad();
};defineExpose({resetSearch,
});
</script><style lang="scss" scoped>
.layout-list {&__empty {padding: 12px 0;color: #666;text-align: center;}
}
</style>

组件使用

<mb-search@updated-search="updatedSearch"
/>
<mb-listref="mbListRef"v-slot="item":request="getList(() => (loadForm))"
><div>内容</div>
</mb-list><script setup>
import { getList } from '@/services/activiti/instance';defineProps({selectTypeList: {type: Array,default: () => [],},
});
const mbListRef = ref();const loadForm = ref({title: '',defName: '',instStatus: 'running',
});function updatedSearch(title) {loadForm.value.title = title;mbListRef.value.resetSearch();
}</script>

相关文章:

移动端Vant-list的二次封装,查询参数重置

Vant-list的二次封装 场景&#xff1a;在写项目需求的时候&#xff0c;移动端有用到vant-list组件。后续需求更新说要对列表数据页加搜索和筛选的功能。发现每次筛选完得在页面内手动重置一次查询参数。不方便&#xff0c;所以封了一层。 二次封装代码 <template><…...

SMU Summer 2024 Contest Round 2

[ABC357C] Sierpinski carpet - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路:通过因为图形的生成过程是完全一样的。可以通过递归&#xff0c;不断分形。函数process(x,y,k)定义为以坐标(x,y)为左上角,填充sqrt3(k)级的地毯。 int n; int c[800][800]; 默认全为…...

Qt:11.输入类控件(QLineEdit-单行文本输入控件、QTextEdit-多行文本输入控件、QComboBox-下拉列表的控件)

一、QLineEdit-单行文本输入控件&#xff1a; 1.1QLineEdit介绍&#xff1a; QLineEdit 是 Qt 库中的一个单行文本输入控件&#xff0c;不能换行。允许用户输入和编辑单行文本。 1.2属性介绍&#xff1a; inputMask 设置输入掩码&#xff0c;以限定输入格式。setInputMask(con…...

Qt 音频编程实战项目

一Qt 音频基础知识 QT multimediaQMediaPlayer 类&#xff1a;媒体播放器&#xff0c;主要用于播放歌曲、网络收音 机等功能。QMediaPlaylist 类&#xff1a;专用于播放媒体内容的列表。 二 音频项目实战程序 //版本5.12.8 .proQT core gui QT multimedia greate…...

C#委托事件的实现

1、事件 在C#中事件是一种特殊的委托类型&#xff0c;用于在对象之间提供一种基于观察者模式的通知机制。 1.1、事件的发送方定义了一个委托&#xff0c;委托类型的声明包含了事件的签名&#xff0c;即事件处理器方法的签名。 1.2、事件的订阅者可以通过运算符来注册事件处理器…...

Java策略模式在动态数据验证中的应用

在软件开发中&#xff0c;数据验证是一项至关重要的任务&#xff0c;它确保了数据的完整性和准确性&#xff0c;为后续的业务逻辑处理奠定了坚实的基础。然而&#xff0c;不同的数据来源往往需要不同的验证规则&#xff0c;如何在不破坏代码的整洁性和可维护性的同时&#xff0…...

【Linux】shell基础知识点(updating)

1.输出重定向2.多命令批量执行&#xff08;; 、&&、 ||&#xff09;3.脚本不同方式执行的区别&#xff08;source、bash、sh、./&#xff09;4.理解环境变量5.export6.引号的使用last.命令相关 1.输出重定向 3种数据流&#xff1a; stdin&#xff1a;标准输入&#xf…...

Python基础练习•二

# ## Python编程入门作业 # # ### 选择题 # 1. 假设等号右侧变量都已知的情况下&#xff0c;下列哪个语句在Python中是⾮法的&#xff1f;&#xff08; B &#xff09; # A. x y z 1 # B. x (y z 1) # C. x, y y, x # D. x y # 2. 关于Python变量&#xff0c;下列…...

智慧科技照亮水利未来:深入剖析智慧水利解决方案如何助力水利行业实现高效、精准、可持续的管理

目录 一、智慧水利的概念与内涵 二、智慧水利解决方案的核心要素 1. 物联网技术&#xff1a;构建全面感知网络 2. 大数据与云计算&#xff1a;实现数据高效处理与存储 3. GIS与三维可视化&#xff1a;提升决策支持能力 4. 人工智能与机器学习&#xff1a;驱动决策智能化 …...

Vue3学习笔记(n.0)

vue指令之v-for 首先创建自定义组件&#xff08;practice5.vue&#xff09;&#xff1a; <!--* Author: RealRoad1083425287qq.com* Date: 2024-07-05 21:28:45* LastEditors: Mei* LastEditTime: 2024-07-05 21:35:40* FilePath: \Fighting\new_project_0705\my-vue-app\…...

基于Spring Boot的在线考试系统

您好&#xff01;我是专注于计算机技术研究的码农小野。如果您对在线考试系统感兴趣或有相关开发需求&#xff0c;欢迎随时联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Spring Boot框架&#xff0c;Java技术 工具&#xff1a;Eclipse&…...

Day65 代码随想录打卡|回溯算法篇---组合总和II

题目&#xff08;leecode T40&#xff09;&#xff1a; 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a;解集不能包含…...

C++ 入门03:函数与作用域

往期回顾&#xff1a; C 入门01&#xff1a;初识 C-CSDN博客C 入门02&#xff1a;控制结构和循环-CSDN博客 一、前言 在前面的文章学习中&#xff0c;我们了解了C语言的基础&#xff0c;包括如何定义变量来存储数据&#xff0c;以及如何利用输入输出流实现程序与用户之间的无缝…...

在Linux/Debian/Ubuntu中出现“Could not get lock /var/lib/dpkg/lock-frontend”问题的解决办法

在Linux/Debian/Ubuntu中出现“Could not get lock /var/lib/dpkg/lock-frontend”问题的解决办法 在使用 apt 或 apt-get 进行软件包管理时&#xff0c;有时会遇到以下错误提示&#xff1a; Could not get lock /var/lib/dpkg/lock-frontend - open (11: Resource temporari…...

odoo中的钩子 Hooks

钩子 钩子&#xff08;Hooks&#xff09;是一种在特定时间点或特定事件发生时执行自定义代码的机制。它们允许开发者在不修改核心代码的情况下&#xff0c;为Odoo添加自定义功能或扩展现有功能。以下是关于Odoo钩子的一些关键点和常见用法&#xff1a; 一、钩子的类型 pre_i…...

05.C1W4.Machine Translation and Document Search

往期文章请点这里 目录 OverviewWhat you’ll be able to do!Learning Objectives Transforming word vectorsOverview of TranslationTransforming vectors Align word vectorsSolving for RFrobenius normFrobenius norm squaredGradient K nearest neighborsFinding the tr…...

计算机网络——数据链路层(点对点协议PPP)

点对点协议PPP的概述 对于点对点的链路&#xff0c;目前使用得最广泛的数据链路层协议是点对点协议 PPP (Point-to-Point Protocol)。 它主要应用于两个场景&#xff1a; 用户计算机与ISP之间的链路层协议就是点对点协议 PPP&#xff0c;1999年公布了回以在以太网上运行的PPP协…...

信息安全概述

名词解释 大数据&#xff1a;指的是所涉及的资料量规模巨大到无法透过主流软件工具&#xff0c;在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯。 云计算&#xff1a;是指通过网络提供计算资源&#xff08;如服务器、存储、数据库、软件开发…...

UE5.3-基础蓝图类整理一

常用蓝图类整理&#xff1a; 1、获取当前关卡名&#xff1a;Get Current LevelName 2、通过关卡名打开关卡&#xff1a;Open Level(by name) 3、碰撞检测事件&#xff1a;Event ActorBeginOverlap 4、获取当前player&#xff1a;Get Player Pawn 5、判断是否相等&#xff1…...

Python面试题: 如何在 Python 中实现一个线程池?

在 Python 中&#xff0c;实现线程池可以使用内置的 concurrent.futures 模块&#xff0c;该模块提供了一个高层次的接口来管理并发任务。ThreadPoolExecutor 类是实现线程池的主要工具。以下是一些使用示例&#xff0c;展示如何在 Python 中实现和使用线程池&#xff1a; 1. …...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...