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.rhkb.cn/news/345448.html

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

相关文章

数据结构(C):二叉树前中后序和层序详解及代码实现及深度刨析

目录 &#x1f31e;0.前言 &#x1f688;1.二叉树链式结构的代码是实现 &#x1f688;2.二叉树的遍历及代码实现和深度刨析代码 &#x1f69d;2.1前序遍历 ✈️2.1.1前序遍历的理解 ✈️2.1.2前序代码的实现 ✈️2.1.3前序代码的深度解剖 &#x1f69d;2.2中序遍历 ✈…

CentOs7 JDK21 安装

CentOs7 JDK21 安装 准备工作 先检查系统是否之前已经安装了jdk 。如果已经安装的话需要卸载。 方式一&#xff1a;使用压缩包的方式 下载jdk21的压缩包 https://www.oracle.com/java/technologies/downloads/ 将下载的gz压缩包上传到服务器并解压 # 创建文件夹 (你可以自…

【Python】读取文件夹中所有excel文件拼接成一个excel表格 的方法

我们平常会遇到下载了一些Excel文件放在一个文件夹下&#xff0c;而这些Excel文件的格式都一样&#xff0c;这时候需要批量这些文件合并成一个excel 文件里。 在Python中&#xff0c;我们可以使用pandas库来读取文件夹中的所有Excel文件&#xff0c;并将它们拼接成一个Excel表…

yarn保姆级安装和使用

目录 前言 一、yarn简介 主要特性 使用场景 二、yarn的安装 yarn的下载 配置环境变量 三、yarn的常用命令 四、yarn的常用配置项 五、npm与yarn的区别 前言 本文旨在介绍如何安装和使用Yarn&#xff0c;以及它的一些常见用法。我们将从Yarn的基本概念开始&#xff0c;…

卡尔曼滤波器例子

卡尔曼滤波器 卡尔曼滤波器(Kalman Filter)是一种用于线性系统状态估计的递归算法,可以有效地融合传感器数据和系统模型来估计系统的状态。它在机器人学中广泛应用,尤其是位置和速度等状态的估计。通过卡尔曼滤波器,可以有效地估计机器人在二维平面内的真实位置,并减小测…

【JavaEE】Spring IoCDI详解

一.基本概念 1.Ioc基本概念 Ioc: Inversion of Control (控制反转), 也就是说 Spring 是⼀个"控制反转"的容器. 什么是控制反转呢? 也就是控制权反转. 什么的控制权发发了反转? 获得依赖对象的过程被反转了也就是说, 当需要某个对象时, 传统开发模式中需要自己通…

商城项目【尚品汇】08异步编排

文章目录 1.线程的创建方式1.1继承Thread类&#xff0c;重写run方法1.2实现Runnable接口&#xff0c;重写run方法。1.3实现Callable接口&#xff0c;重新call方法1.4以上三种总结1.5使用线程池创建线程1.5.1线程池创建线程的方式1.5.2线程池的七大参数含义1.5.3线程池的工作流程…

视觉SLAM十四讲:从理论到实践(Chapter9:后端1)

前言 学习笔记&#xff0c;仅供学习&#xff0c;不做商用&#xff0c;如有侵权&#xff0c;联系我删除即可 一、目标 1.理解后端的概念。 2.理解以EKF为代表的滤波器后端的工作原理。 3.理解非线性优化的后端&#xff0c;明白稀疏性是如何利用的。 4.使用g2o和Ceres实际操作…

报表或者BI的价值在哪?这是十几年的问题啦!

对&#xff0c;问题已经十几年了&#xff0c;答案也应该普世都懂了吧&#xff0c;但非常遗憾&#xff0c;答案没有问题普及的广。看似简单&#xff0c;但也难说清楚&#xff0c;不同的人&#xff0c;总会有不同的看法。 为什么要解释这个并不新鲜的问题&#xff1f; 因为有人问…

阅读笔记:Multi-threaded Rasterization in the Chromium Compositor

Multi-threaded Rasterization in the Chromium Compositor PPT 原始链接&#xff1a; https://docs.google.com/presentation/d/1nPEC4YRz-V1m_TsGB0pK3mZMRMVvHD1JXsHGr8I3Hvc/edit?uspsharing PPT主要介绍了Chromium浏览器中使用多线程光栅化(Impl-side painting)的机制&a…

基于NodeJs 的Vue安装和创建项目

基于NodeJs 的Vue安装和创建项目 一、Node.js的下载与安装 下载地址&#xff1a; https://nodejs.org/en/download/prebuilt-installer 安装完之后&#xff0c;启动 cmd命令行&#xff0c;验证 Node.js 是否安装成功 二、配置npm的全局模块的存放路径以及缓存的路径 注&…

【简单介绍下DALL-E2,什么是DALL-E2?】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

【数据结构】 -- 堆 (堆排序)(TOP-K问题)

引入 要学习堆&#xff0c;首先要先简单的了解一下二叉树&#xff0c;二叉树是一种常见的树形数据结构&#xff0c;每个节点最多有两个子节点&#xff0c;通常称为左子节点和右子节点。它具有以下特点&#xff1a; 根节点&#xff08;Root&#xff09;&#xff1a;树的顶部节…

idea如何根据路径快速在项目中快速打卡该页面

在idea项目中使用快捷键shift根据路径快速找到该文件并打卡 双击shift(连续按两下shift) -粘贴文件路径-鼠标左键点击选中跳转的路径 自动进入该路径页面 例如&#xff1a;我的实例路径为src/views/user/govType.vue 输入src/views/user/govType或加vue后缀src/views/user/go…

Cweek4+5

C语言学习 十.指针详解 6.有关函数指针的代码 代码1&#xff1a;(*(void (*)())0)(); void(*)()是函数指针类型&#xff0c;0是一个函数的地址 (void(*)())是强制转换 总的是调用0地址处的函数&#xff0c;传入参数为空 代码2&#xff1a;void (*signal(int, void(*)(int))…

以客户为中心:消费电子行业的产品研发之道

在消费电子行业这片快速变化的领域中&#xff0c;产品的迭代更新和技术的创新是推动行业不断前进的动力。然而&#xff0c;随着市场的日益成熟和消费者需求的多样化&#xff0c;如何确保产品能够满足目标用户的需求&#xff0c;成为摆在每一个产品研发团队面前的难题。本文将探…

JVM垃圾收集器和性能调优

目标&#xff1a; 1.JVM垃圾收集器有哪几种&#xff1f; 2.CMS垃圾收集器回收步骤。 一、JVM常见的垃圾回收器 为什么垃圾回收的时候需要STW? 标记垃圾的时候&#xff0c;如果不STW&#xff0c;可能用户线程就会不停的产生垃圾。 1.1 单线程收集 Serial和SerialOld使用单…

如何下载BarTender软件及详细安装步骤

BarTender是美国海鸥科技推出的一款优秀的条码打印软件&#xff0c;应用于 WINDOWS95 、 98 、 NT 、 XP 、 2000 、 2003 和 3.1 版本&#xff0c; 产品支持广泛的条形码码制和条形码打印机&#xff0c; 不但支持条形码打印机而且支持激光打印机&#xff0c;还为世界知名品牌条…

基于R语言BIOMOD2 及机器学习方法的物种分布模拟与案例分析

原文链接&#xff1a;基于R语言BIOMOD2 及机器学习方法的物种分布模拟与案例分析https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247606139&idx4&snf94ec30bfb5fa7ac0320403d49db3b66&chksmfa821e9ccdf5978a44a9ba96f6e04a121c0bbf63beea0940b385011c0b…

联合体和枚举<C语言>

导言 在C语言中除了结构体外&#xff0c;联合体和枚举也是自定义类型&#xff0c;联合体主要用于节省空间&#xff0c;在同一块内存存储多种类型的数据&#xff0c;而枚举可以提高代码的可读性、可维护性。 联合体&#xff08;union&#xff09; 它还有个更容易理解的名字&…