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记录当前滑动状态,而不是直接改变isOpened
				this.tempOpened = !this.isOpened[this.userList[index].id];
			},

	bindClick(e, item) {
				const that = this
				console.log(e);
				console.log('item', item);
				const id = item.id
				if (e.content.text === '通过') {
					uni.showModal({
						title: '提交确认',
						content: `确认审核通过?`,
						success: (res) => {
							if (res.confirm) {
								that.isPass = true
								this.isOpened[item.id] = this.tempOpened; 
								that.tempOpened = null; // 清理临时状态
								that.makeRequst(id) // 调用后台接口
							} else if (res.cancel) {
								that.isPass = false
								that.isOpened[item.id] = that.tempOpened;
								that.tempOpened = null; // 清理临时状态
								console.log('用户取消操作');
							}
						}
					});
				} 
}

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

官方文档uni-app官网

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记——网络参考模型——TCP/IP模型(网络层)

三、TCP/IP模型-网络层 1、IPV4报头 (1)IPV4报文格式 IP Packet(IP数据包)&#xff0c;其包头主要内容如下∶ Version版本∶4 bit&#xff0c;4∶表示为IPv4; 6∶表示为IPv6。 Header Length首部长度∶4 bit&#xff0c;代表IP报头的长度(首部长度)&#xff0c;如果不带Opt…

传输协议TCP-原理部分

传输控制协议TCP&#xff08;Transmission Control Protocol&#xff09;一种基于连接的可靠的稳定的无重复的传输协议。 1、TCP头部信息 TCP协议头部信息如下&#xff1a; 一共占用20个字节 16位源端口号&#xff1a;发送进程的主机端口16位目的端口号&#xff1a;接收主机…

工作备忘录软件有哪些 记事备忘提醒三合一的备忘录

在工作中&#xff0c;我总是觉得自己脑子好像不够用&#xff0c;一会儿是这个项目的进度要跟踪&#xff0c;一会儿是那个会议的要点要记录。每天都在忙碌与混乱中度过&#xff0c;我甚至开始怀疑自己是否适合这份工作。 备忘录不仅是一个简单的记事工具&#xff0c;像敬业签这…

MyBatis总结(2)- MyBatis实现原理(一)

Mybatis实现原理&#xff1a; 概括一句话&#xff1a;约定配置参数mybatis-config.xml&#xff0c;映射关系JavaBean-mapper.xml&#xff0c;用SqlSessionFactoryBuilder构建应用程序运行期间需要的SqlSessionFactory实例对象&#xff0c;当请求或方法需要执行CURD操作时&…

matlab使用教程(92)—流线图、流带图和流管图

1.使用向量数据显示流线图 MATLAB 向量数据集 wind 代表北美地区的气流。本示例结合使用了几种方法&#xff1a; 利用流线跟踪风速 利用切片平面显示数据的横截面视图 利用切片平面上的等高线提高切片平面着色的可见性 1.1确定坐标的范围 加载数据并确定用来定位切片平面…

TypeScript系列之-- 带你深层次理解对象类型回归本质探究原理

描述对象的数据类型&#xff1a; 使用class/constructor描述用type或interface描述 使用class/constructor描述 const a: Date ()> console.log(1) // Error 会报错缺少日期的一些属性 const a: Function ()> console.log(1) // Ok class Person { name: string …

行心科技中禄松波携手,开启智能健康新时代

在2024年第34届健博会暨中国大健康产业文化节的盛大舞台上&#xff0c;广州市行心信息科技有限公司&#xff08;以下简称“行心科技”&#xff09;与浙江中禄松波生物工程有限公司&#xff08;以下简称“中禄松波”&#xff09;宣布达成战略合作&#xff0c;共同推动医康养产业…

企业建站响应式网站建设平台版源码系统 海量模版可选择 带完整的安装代码以及搭建教程

系统概述 企业建站响应式网站建设平台版源码系统是一款集创新性、实用性和便捷性于一体的建站解决方案。它旨在为用户提供一站式的网站建设服务&#xff0c;无论你是新手还是经验丰富的开发者&#xff0c;都能通过该系统轻松实现网站的构建与部署。 该系统采用先进的技术架构…

数据结构——算法和算法效率的度量

目录 一、引言 二、算法 1 算法的基本概念 2 算法的复杂度 2.1 时间复杂度 2.1.1 概念 2.1.2 大O的渐进表示 3 算法的空间复杂度 3.1 概念 3.2 实例 4 实例分析 5 结论 一、引言 大家在写代码的时候有没有发现写同样功能的代码有多种不同的写法&#xff0c;而不同的代…

Lab_ Finding and exploiting an unused API endpoint

https://portswigger.net/web-security/learning-paths/api-testing/api-testing-identifying-and-interacting-with-api-endpoints/api-testing/lab-exploiting-unused-api-endpoint# 查看功能点&#xff1a; 在Burp的HTTP history中发现 /api路径 我们先尝试一下将API请求…

ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript - 框选显示高亮几何对象

ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript - 框选显示高亮对象 核心代码完整代码&#xff1a;在线示例 在研究 ArcGIS JSAPI RenderNode 高亮&#xff08;highlights&#xff09;FBO 的时候&#xff0c;实现了一下框选高亮几何对象&#xff0c;这里分享一下。 …

Python Pygments库:代码高亮的利器

更多Python学习内容&#xff1a;ipengtao.com Pygments是一个用于Python的强大语法高亮库。它支持多种编程语言和标记格式&#xff0c;能够将源代码转换为高亮格式的文本&#xff0c;使代码在阅读和展示时更加清晰易懂。Pygments广泛应用于博客、文档、代码编辑器和IDE中&#…

视频会员干货收藏

这个文章绝对价值几百块&#xff0c;可以省去你不少视频会员的钱。但还是建议大家支持正版。。。 只推荐货真价实的好东西&#xff0c;谁用谁知道。无论电影还是电视剧更新速度还是很快的&#xff0c;而且最重要的一点&#xff0c;你连注册都不用注册&#xff0c;直接看&#x…

宝兰德应用服务器软件通过保险业信息技术应用创新攻关实验室产品适配测试认证

近期&#xff0c;宝兰德中间件核心产品「应用服务器软件 V9.5.5」&#xff08;以下简称&#xff1a;应用服务器软件&#xff09;顺利通过了保险业信息技术应用创新攻关实验室产品适配测试。标志着宝兰德应用服务器软件符合信息技术产品适配要求&#xff0c;能够全面支持金融保险…

【网络基础1】

文章目录 学习目标一、网络基础11.网络的重要性2.osi7层模式3.协议和osi7层模型的关系4.数据的封装和解封装5.tcp的三次握手6.Ddos攻击讲解7.Tcp的四次挥手 二、网络基础21.文字编码2.IP地址的划分3.子网掩码4.同网段ip才能直接通信5.DNS解析6.DNS解析命令7.短域名为什么值钱8.…

项目工具|git相关

本博客暂时只作为个人资料&#xff0c;后续会进行完善&#xff0c;主要内容来自&#xff1a; 【【Git第一讲】&#xff1a;git分区与两个盒子的故事】 理解暂存区和未暂存区 git为什么要多一个暂存区&#xff1f;难道不能我把代码写完后就是未暂存区&#xff0c;然后直接提交…

mysql设置允许外部ip访问,局域网IP访问

&#xff08;支持MYSQL8版本&#xff09; 1. 登录进入mysql&#xff1b;mysql -uroot -p输入密码进入 2. 输入以下语句&#xff0c;进入mysql库&#xff0c;查看user表中root用户的访问 use mysql; select host,user from user; 3. 更新user表中root用户域属性&#xff0c…

STM32——ADC篇(ADC的使用)

一、ADC的介绍 1.1什么是ADC ADC&#xff08;Analogto-Digital Converter&#xff09;模拟数字转换器&#xff0c;是将模拟信号转换成数字信号的一种外设。比如某一个电阻两端的是一个模拟信号&#xff0c;单片机无法直接采集&#xff0c;此时需要ADC先将短租两端的电…

深度学习(三)

5.Functional API 搭建神经网络模型 5.1利用Functional API编写宽深神经网络模型进行手写数字识别 import numpy as npimport pandas as pdimport matplotlib.pyplot as pltfrom sklearn.datasets import load_irisfrom sklearn.model_selection import train_test_splitfrom…

SVNCloud 与 Navicat和IDEA的连接

文章目录 SVNCloud 配置Navicat访问云端数据库与IDEA Java jdbc 的连接 SVNCloud 配置 访问网址&#xff1a;SVN注册账号&#xff0c;进入mysql区域&#xff1a; 数据库管理->创建数据库&#xff0c;输入数据库名称和密码&#xff0c;注意&#xff0c;这里的数据库名称实际…