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

news2024/9/20 1:14:42

按照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官网

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

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

相关文章

基于JSP的医院远程诊断系统

开头语&#xff1a; 你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; JSP Servlet JSPBean 工具&#xff1a; IDEA/Eclipse、Navica…

ChatTTS - 用于对话场景的文本转语音

大家好&#xff0c;我是小麦&#xff0c;今天给大家分享一款免费&#xff0c;可用于对话场景的文本转语音工具。 阅读感悟 不知道大家在日常的学习、工作中是否有这样的一个情况&#xff0c;当我们阅读完一篇文章&#xff0c;很快就能读完&#xff0c;但印象不会很深&#xf…

Python学习打卡:day01

day1 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 1、Python 软件&#xff08;PyCharm&#xff09; 安装&#xff1a;在 Linux 环境下安装 Pycharm 插件&#xff1a;汉化、翻译 设置字体大小 常用快捷…

Django ListView 列表视图类

ListView是Django的通用视图之一&#xff0c;它用于显示一个对象列表。这个视图将所有的对象作为一个上下文变量传递给模板。 1&#xff0c;创建应用 python manage.py startapp app3 2&#xff0c;注册应用 Test/Test/settings.py Test/Test/urls.py 3&#xff0c;添加模型 …

车联网安全入门——CAN总线模糊测试

文章目录 车联网安全入门——CAN总线模糊测试介绍主要特点使用场景 模糊测试&#xff08;Fuzz Testing&#xff09;CAN 总线模糊测试&#xff08;CAN Packet Fuzzing&#xff09;主要步骤工具和软件主要目标 Can-Hax安装使用获得指纹模糊测试 SavvyCAN 总结参考 车联网安全入门…

深入理解 C++ 智能指针

文章目录 一、引言二、 原始指针的问题1、原始指针的问题2、智能指针如何解决这些问题 三、智能指针的类型四、std::shared_ptr1、shared_ptr使用2、shared_ptr的使用注意事项3、定制删除器4、shared_ptr的优缺点5、shared_ptr的模拟实现 五、std::unique_ptr1、unique_ptr的使…

端午节到了,祝大家粽子甜甜,生活美满!愿粉丝们心想事成,健康平安,阖家幸福!

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

java+Vue +Spring boot技术开发的UWB高精度定位技术系统源码 uwb定位系统+基站定位

javaVue Spring boot技术开发的UWB高精度定位技术系统源码 uwb定位系统基站定位 系统采用UWB高精度定位技术&#xff0c;可实现厘米级别定位。UWB作为一种高速率、低功耗、高容量的新兴无线局域定位技术&#xff0c;目前应用主要聚焦在室内高精确定位&#xff0c;例如在工业自动…

ABAP - SAP与企业微信集成

最近接到一个SAP直接给企业微信推送消息的需求&#xff0c;说实话之前一直没接触过&#xff0c;脑袋空空的&#xff0c;最终通过在百度搜索案例成功解决了&#xff0c;百度虽然一直被诟病&#xff0c;但却无法否认它的神奇。实现效果 实现思路&#xff1a;从需求出发&#xff0…

游戏服务器工程实践一:百万级同时在线的全区全服游戏

我应该有资格写这篇文章&#xff0c;因为亲手设计过可以支撑百万级同时在线的全区全服类型的游戏服务器架构。 若干年前我在某公司任职时&#xff0c;参与研发过一款休闲类型的游戏&#xff0c;由 penguin 厂独代。研发的时候&#xff0c;p 厂要求我们的游戏服务器要能支撑百万…

IO进程线程(十一)进程间通信 消息队列

文章目录 一、IPC(Inter-Process Communication)进程间通信相关命令 &#xff1a;&#xff08;一&#xff09;ipcs --- 查看IPC对象&#xff08;二&#xff09;获取IPC键值&#xff08;三&#xff09;删除IPC对象的命令&#xff08;四&#xff09;获取IPC键值的函数1. 函数定义…

[office] 快速提取出Excel 2010单元格括号内的文字信息 #知识分享#经验分享

快速提取出Excel 2010单元格括号内的文字信息 实例演示 ①我们打开一份Excel电子表格&#xff0c;我们要将C列里面括号内的内容提取到D列里面&#xff0c;单击D2单元格&#xff0c;输入下面的函数公式&#xff1a; MID(C2,FIND("(",C2)1,LEN(C2)-FIND("("…

vue如何使用slot

1. vue2 如何使用slot 1.1. 默认插槽&#xff08;Default Slot&#xff09;1.2. 具名插槽&#xff08;Named Slot&#xff09;1.3. 作用域插槽&#xff08;Scoped Slot&#xff09; 2. vue3 如何使用slot 2.1. 默认插槽&#xff08;Default Slot&#xff09;2.2. 具名插槽&…

Pytorch学习11_神经网络-卷积层

1.创建神经网络实例 import torch import torchvision from torch import nn from torch.nn import Conv2d from torch.utils.data import DataLoaderdatasettorchvision.datasets.CIFAR10("../dataset_cov2d",trainFalse,transformtorchvision.transforms.ToTensor(…

【深度学习】NLP,Transformer讲解,代码实战

文章目录 1. 前言2. Transformer结构训练过程1. 输入嵌入和位置编码2. 编码器层2.1 单头的注意力机制(便于理解)2.2 多头的注意力机制(Transformer真实使用的)2.3 残差连接和层归一化2.4 前馈神经网络&#xff08;FFN&#xff09;2.5 残差连接和层归一化2.6 总结 3. 解码器层 推…

本周重磅日程:美联储决议、中美通胀、苹果AI和英伟达拆股

当周重磅看点颇多&#xff1a;美联储FOMC将公布最新利率“点阵图”&#xff0c;中国5月金融数据、中美通胀数据将出炉&#xff0c;日本央行购债计划是否变动成为市场焦点&#xff0c;苹果2024全球开发者大会一系列AI功能将亮相&#xff1b;特斯拉2024股东大会上马斯克560亿美元…

Linux 内核参数-相关介绍

Linux 内核参数-相关介绍 今天&#xff0c;介绍Linux内核参数相关内容。由于Linux内核优化需要根据具体需求进行具体优化&#xff0c;同时需要具备一定经验&#xff0c;所以这里不涉及优化操作内容。 不过&#xff0c;遇到面试中有相关题目&#xff0c;不至于答不上来&#x…

Android.mk文件生成的so工程文件并Debug调试native code

1.这里主要展示一下从最原始先新建一个工程 2.将hello的子工程文件放入上面新建好的工程里面&#xff0c;直接拷贝放置这里 3.修改根目录下的settings.gradle 加入hello 4.app工程下的build.gradle加入依赖&#xff0c;这样就可以识别hello中的java包文件 5.MainActivity 中来&…

python tushare股票量化数据处理:学习中

1、安装python和tushare及相关库 matplotlib pyplot pandas pandas_datareader >>> import matplotlib.pyplot as plt >>> import pandas as pd >>> import datetime as dt >>> import pandas_datareader.data as web 失败的尝试yf…

vscode侧边栏错乱重制

vscode 重制命令面板 View: Reset View Locations