uni-app uni-swipe-action 滑动操作状态恢复

按照uni-app官方文档的写法 当前同一条滑动确认之后 页面列表刷新 但是滑动的状态还在 入下图所示:

我们需要在滑动确认之后 页面刷新 滑动状态恢复 那么我们就来写一下这部分的逻辑:

首先,配置一下:show="isOpened[item.id]" @change="change(index)"

注意:isOpened一定要定位到你当前点击的内容,我这里是用id区分的, 不然会出现所有列表都同步滑开或者关闭

<view class="uni-swipe-box" v-for=" (item,index) in userList" :key="index"><uni-swipe-action-item :threshold="0" :show="isOpened[item.id]" @change="change(index)":auto-close='true' :right-options="options2" @click="bindClick($event,item)"><view class="content-box"><view class="user-name">姓名:<span class="span">{{item.userName}}</span></view><view class="user-name">分组:<span class="span">{{item.groupName}}</span></view></view></uni-swipe-action-item></view>
data() {return {	isOpened: {},tempOpened: null,  // 临时状态}
},mounted() {// 初始化 userList 中每个item的 isOpened 状态this.userList.forEach(item => {this.$set(this.isOpened, item.id, false);});},
methods: {change(index) {// 使用tempOpened记录当前滑动状态,而不是直接改变isOpenedthis.tempOpened = !this.isOpened[this.userList[index].id];},bindClick(e, item) {const that = thisconsole.log(e);console.log('item', item);const id = item.idif (e.content.text === '通过') {uni.showModal({title: '提交确认',content: `确认审核通过?`,success: (res) => {if (res.confirm) {that.isPass = truethis.isOpened[item.id] = this.tempOpened; that.tempOpened = null; // 清理临时状态that.makeRequst(id) // 调用后台接口} else if (res.cancel) {that.isPass = falsethat.isOpened[item.id] = that.tempOpened;that.tempOpened = null; // 清理临时状态console.log('用户取消操作');}}});} 
}

这样就可以实现及时恢复滑动状态 

官方文档uni-app官网

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

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

相关文章

探地雷达正演模拟,基于时域有限差分方法,二

回顾上一章的内容&#xff0c;首先是探地雷达的使用范围和其主要面向的地球物理勘探对象&#xff0c;其次是Maxwell方程及FDTD基础知识&#xff0c;本章的内容包括&#xff1a;1、基于C的TE波波动方程实现 2、边界问题的产生及处理。 一、基本波动方程实现&#xff1a; 使用C…

SpringBoot的Mybatis-plus实战之基础知识

文章目录 MybatisPlus 介绍一、MyBatisPlus 集成步骤第一步、引入依赖第二步、定义mapper 二、注解TableNameTableldTableField 三、配置文件四、加解密实现步骤 在SpringBoot项目中使用Mybatis-plus&#xff0c;记录下来&#xff0c;方便备查。 MybatisPlus 介绍 为简化开发而…

[数据集][目标检测]厨房积水检测数据集VOC+YOLO格式88张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;88 标注数量(xml文件个数)&#xff1a;88 标注数量(txt文件个数)&#xff1a;88 标注类别数…

【Activiti7系列】基于Spring Security的Activiti7工作流管理系统简介及实现(附源码)(下篇)

作者&#xff1a;后端小肥肠 上篇&#xff1a;【Activiti7系列】基于Spring Security的Activiti7工作流管理系统简介及实现&#xff08;上篇&#xff09;_spring security activiti7-CSDN博客 目录 1.前言 2. 核心代码 2.1. 流程定义模型管理 2.1.1. 新增流程定义模型数据 …

Internlm_xcomposer2模型结构解读

Internlm_xcomposer2模型结构解读 项目地址 Internlm_xcomposer2模型总体结构 <class transformers_modules.internlm-xcomposer2-4khd-7b.modeling_internlm_xcomposer2.InternLMXComposer2ForCausalLM> InternLMXComposer2ForCausalLM((model): InternLM2Model((tok_…

阻塞队列和线程池

一、什么是阻塞队列 1.1 什么是队列 队列是先进先出。 队列是一种特殊的线性表&#xff0c;特殊之处在于它只允许在表的前端&#xff08;front&#xff09;进行删除操作&#xff0c;而在表的后端&#xff08;rear&#xff09;进行插入操作&#xff0c;和栈一样&#xff0c;队…

Redis 双写一致原理篇

前言 我们都知道,redis一般的作用是顶在mysql前面做一个"带刀侍卫"的角色,可以缓解mysql的服务压力,但是我们如何保证数据库的数据和redis缓存中的数据的双写一致呢,我们这里先说一遍流程,然后以流程为切入点来谈谈redis和mysql的双写一致性是如何保证的吧 流程 首先…

10.1 Go Goroutine

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

transformer 位置编码源码解读

import torch import mathdef get_positional_encoding(max_len, d_model):"""计算位置编码参数&#xff1a;max_len -- 序列的最大长度d_model -- 位置编码的维度返回&#xff1a;一个形状为 (max_len, d_model) 的位置编码张量"""positional_e…

【机器学习】GPT-4中的机器学习如何塑造人类与AI的新对话

&#x1f680;时空传送门 &#x1f50d;引言&#x1f4d5;GPT-4概述&#x1f339;机器学习在GPT-4中的应用&#x1f686;文本生成与摘要&#x1f388;文献综述与知识图谱构建&#x1f6b2;情感分析与文本分类&#x1f680;搜索引擎优化&#x1f4b4;智能客服与虚拟助手&#x1…

国内外网络安全现状分析

一、国内网络安全现状 1.1 国内网络安全威胁 国内的网络安全威胁主要表现在以下几个方面&#xff1a; 恶意软件&#xff1a;包括计算机病毒、蠕虫、木马和间谍软件等&#xff0c;它们能感染计算机系统、窃取敏感信息或破坏系统功能。网络钓鱼&#xff1a;通过伪装成可信任的…

27-LINUX--I/O复用-poll

一.poll概述 poll是一个多路复用的I/O模型&#xff0c;一个进程监视多个文件描述符&#xff0c;当文件描述符就绪时&#xff0c;poll返回可读并做相应处理。 1.poll的模型 #include <poll.h>struct pollfd {int fd; //文件描述符short events; //事件类型 s…

OpenAI新研究破解GPT-4大脑,分解1600万个特征打开“黑匣子”,Ilya 、Jan Leike也参与了!

6月7日凌晨&#xff0c;OpenAI在官网发布了一个新的研究成果&#xff0c;首次破解GPT-4的神经网络活动。通过改进大规模训练稀疏自动编码器将GPT-4的内部表示分解为 1600 万个特征。而且&#xff0c;前段时间离职的Ilya Sutskever、Jan Leike也是作者之一&#xff01; 这不是破…

公式面试题总结(三)

13.说说你对 BOM 的理解&#xff0c;常见的 BOM 对象你了解哪些&#xff1f; BOM (Browser Object Model)&#xff0c;浏览器对象模型&#xff0c; ⚫ 提供了独立于内容与浏览器窗口进行交互的对象 ⚫ 其作用就是跟浏览器做一些交互效果 ⚫ 比如如何进行页面的后退&…

“螺丝钉“好,还是“杂役“好

本篇中&#xff0c;螺丝钉指代大厂工作&#xff0c;杂役则代表小公司工作。这无疑是一个见仁见智且颇为棘手的问题&#xff0c;需结合自身年龄、所处环境等实际状况来做出抉择。倘若一定要给出个人观点&#xff1a;“刚毕业应选择大厂螺丝钉&#xff0c;这对自身眼界的开阔以及…

将AIRNet集成到yolov8中,实现端到端训练与推理

AIRNet是一个图像修复网络,支持对图像进行去雾、去雨、去噪声的修复。其基于对比的退化编码器(CBDE),将各种退化类型统一到同一嵌入空间;然后,基于退化引导恢复网络(DGRN)将嵌入空间修复为目标图像。可以将AIRNet的输出与yolov8进行端到端集成,实现部署上的简化。 本博…

关于 Redis 中集群

哨兵机制中总结到&#xff0c;它并不能解决存储容量不够的问题&#xff0c;但是集群能。 广义的集群&#xff1a;只要有多个机器&#xff0c;构成了分布式系统&#xff0c;都可以称之为一个“集群”&#xff0c;例如主从结构中的哨兵模式。 狭义的集群&#xff1a;redis 提供的…

java面试题:什么时候使用抽象类?什么时候使用接口

**使用抽象类的情景&#xff1a;** 1. **需要共享实现&#xff1a;** 当你想要为一组相关类提供一些通用的实现代码时&#xff0c;可以使用抽象类。抽象类可以包含具体的方法实现&#xff0c;这些实现可以被其子类继承和复用。 2. **代码复用&#xff1a;** 抽象类有助于消除代…

Django学习二:配置mysql,创建model实例,自动创建数据库表,对mysql数据库表已经创建好的进行直接操作和实验。

文章目录 前言一、项目初始化搭建1、创建项目&#xff1a;test_models_django2、创建应用app01 二、配置mysql三、创建model实例&#xff0c;自动创建数据库表1、创建对象User类2、执行命令 四、思考问题&#xff08;****&#xff09;1、是否会生成新表呢&#xff08;答案报错&…

力扣第197题:上升的温度

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 在本篇文章中&#xff0c;我们将详细解读力扣第197题“上升的温度”。通过学习本篇文章&#xff0c;读者将掌握如何使用SQL语句来解决这一问题&#xff0c;并了解相关的复杂度分…