当前位置: 首页 > 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. …...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

大模型真的像人一样“思考”和“理解”吗?​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...