uni-app 微信 支付宝 小程序 使用 longpress 实现长按删除功能,非常简单 只需两步

news2024/9/19 10:49:55

1、先看效果

2、直接上代码 ui结构

<view class="bind" @longpress="deleteImage" :data-index="index">
      <view class="bind_left">绑定设备</view>
      <view class="bind_right">
        <view class="bind_top">
          <text class="bind_title">F039</text>
          <text>一拖四充电桩</text>
        </view>
        <view class="bind_body">
          <text class="bind_title">SN00000000000125 | 1F01</text>
          <image class="icon_imaeg1" src="../../static/saoma/back.png" mode="aspectFit"></image>
        </view>
        <view class="bind_bottom">
          <view class="bottom_title1">1</view>
          <view class="bottom_title1">2</view>
          <view class="bottom_title1">3</view>
        </view>
      </view>
    </view>

 3、js 逻辑

// 长按删除
const deleteImage = (e) => {
  console.log('长按', e);
  const index = e.currentTarget.dataset.index; //获取当前长按图片下标
  uni.showModal({
    title: '提示',
    content: '确定删除吗?',
    success: function (res) {
      if (res.confirm) {
        uni.showToast({
          title: '删除成功',
          icon: 'none'
        });
      } else if (res.cancel) {
        uni.showToast({
          title: '取消删除',
          icon: 'none'
        });
        console.log('用户点击取消');
      }
    }
  });
};

 

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

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

相关文章

三方登录- iOS Twitter登录

背景 在现代移动应用中&#xff0c;集成第三方登录已经成为一种常见的需求&#xff0c;它不仅能提高用户体验&#xff0c;还能减少用户注册的阻力。我们选择了 Twitter 作为示例&#xff0c;但类似的步骤和逻辑也适用于其他第三方登录服务。希望这篇博客能为你提供清晰的指导&…

【Spring】spring入门程序

案例要求&#xff1a;创建一个 Studentservice 类&#xff0c;其中需要使用 studentDao 接口的保存方法&#xff0c;来存储一个Student 类的对象&#xff0c;StudentDao 接口有两个不同的实现类&#xff0c;通过 Spring 的方式&#xff0c;为 Student类创建对象并为属性赋值&am…

2024电工杯B题食谱评价与优化模型思路代码论文分析

2024年电工杯数学建模竞赛B题论文和代码已完成&#xff0c;代码为B题全部问题的代码&#xff0c;论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解&#xff09;、模型…

vmware - 主机向虚拟机拷贝文件的临时方法

文章目录 vmware - 主机向虚拟机拷贝文件的临时方法概述笔记确认主机/虚拟机之间网络是通的在虚拟机中新建一个文件夹(e.g. c:\test), 将这个文件夹设为共享文件夹。查看虚拟机中的当前用户(远程登录要用)远程登录END vmware - 主机向虚拟机拷贝文件的临时方法 概述 程序打包…

go 微服务框架kratos错误处理的使用方法及原理探究

通过go语言原生http中响应错误的实现方法&#xff0c;逐步了解和使用微服务框架 kratos 的错误处理方式&#xff0c;以及探究其实现原理。 一、go原生http响应错误信息的处理方法 处理方法&#xff1a; ①定义返回错误信息的结构体 ErrorResponse // 定义http返回错误信息的…

vscode 插件开发指南

1安装nodejs、vscode 2安装插件脚手架 npm install -g yo generator-code 3使用命令创建插件项目 yo code 4在vscode中打开项目 5运行调试&#xff0c;按F5键 6在新打开的窗口中按shiftctrlp 然后执行命令 7配置右键菜单命令 遇到问题&#xff1a; 1.package.json中vsc…

【ELK日志收集过程】

文章目录 为什么要使用ELK收集日志ELK具体应用场景ELK日志收集的流程 为什么要使用ELK收集日志 使用 ELK&#xff08;Elasticsearch, Logstash, Kibana&#xff09;进行日志收集和分析有多种原因。ELK 堆栈提供了强大、灵活且可扩展的工具集&#xff0c;能够满足现代 IT 系统对…

B端概念稿,贼靓!像概念车一样未必落地,但是潮流引领。

概念稿在UI设计中往往难以落地&#xff0c; 主要有以下几个原因&#xff1a; 抽象性&#xff1a;概念稿通常是设计师在初始阶段为了表达和传达设计理念而创建的&#xff0c;它们往往比较抽象和概念化。这使得概念稿在实际落地时需要进一步细化和具体化&#xff0c;以便开发人员…

ChatGPT类大模型应用入门了解与使用

一 前言 ChatGPT大众热情逐渐褪去&#xff0c;但在后台技术人的探索还处于热火朝天状态。如果我们生活的世界是一杯清水&#xff0c; 那类似ChatGPT的语言大模型技术的横空出世就如滴入水杯的一滴墨汁&#xff0c;第一滴很显眼&#xff0c;但实际上是后续墨汁慢慢扩散渗透才是…

[数据集][目标检测]森林火灾检测数据集VOC+YOLO格式362张1类别

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

生成模型 | 从 VAE 到 Diffusion Model (上)

文章目录 一&#xff0c;GAN(对抗式生成网络&#xff09;二&#xff0c;Auto-Encoder(AE) 和 Denoising Auto-Encoder (DAE)三&#xff0c;VAE四&#xff0c;VQ-VAE (Vector Quantized Variational Autoencoder)VQ-VAE 2小总结&#xff1a; 五&#xff0c;DALL-E &#xff08;O…

Google speech command 数据集获取

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…

Java学习【接口的使用实例,浅克隆与深克隆】

Java学习【接口的使用实例&#xff0c;浅拷贝与深拷贝】 Comparable接口String类型比较多个对象的比较 Comparator接口Cloneable接口浅拷贝深拷贝 Comparable接口 当我们想要比较两个基本数据类型的大小时直接用 > , < , 就可以了&#xff0c;那么如果是自定义的类要根…

为什么我们应该放弃定义敏感数据?

个人数据与人以及其他个人数据深深地交织在一起&#xff0c;它就像一幅巨大的挂毯&#xff0c;而这些线是无法轻易拆开的。尝试定义敏感数据就像徒劳地试图从挂毯中找出不同的线头一样&#xff0c;线头与其他线头交织在一起&#xff0c;一旦开始拆线&#xff0c;整个挂毯就会散…

IP地址概述和配置

一.IP地址的概述 在计算机网络中&#xff0c;连接的网络设备和计算机都有唯一的地址&#xff0c;以此作为该计算机在internet中的唯一标识。 二.IP地址的定义 IP地址&#xff08;internet protocol Address&#xff0c;网络协议地址&#xff09;是用于表示网络节点的逻辑地址…

黄石首家Pearson VUE国际认证考试中心落户湖北理工学院

Pearson VUE 作为 Pearson 集团的专门从事计算机化考试服务的公司&#xff0c;到目前为止&#xff0c;已在全世界165 个国家授权了 4400 多个考试中心以及超过 230 家 PVUE 自有考试中心&#xff0c;其中在中国的有三百多个授权考点和 4 个自有考试中心。Pearson VUE 以其技术和…

虚拟列表 vue-virtual-scroller 的使用

npm 详情&#xff1a;vue-virtual-scroller - npm (npmjs.com) 这里我使用的是RecycleScroller。 App.vue <template><RecycleScrollerclass"scroller":items"items":item-size"54"v-slot"{ item }"><list-item :it…

『光谷云智慧大屏』数字智慧型 案例赏析

设计背景 随着数字化转型的不断深入&#xff0c;智慧大屏在云数据处理中心扮演着越来越重要的角色。大屏采用先进技术&#xff0c;构建了一个直观且互动的实时数据监控系统。它不仅提高了数据处理的效率&#xff0c;还为数据中心的智能化管理和运营提供了强有力的支持&#xf…

智慧工地势在必行,可以减少管理的无序状态,效率倍增。

智慧工地的建设对于提高工地管理效率和减少无序状态具有重要意义。智慧工地通过引入先进的信息技术和智能化设备&#xff0c;可以实现以下方面的优势&#xff1a; 1. 实时监测和管理&#xff1a; 智慧工地可以通过传感器、监控摄像头等设备对施工现场的各种参数和情况进行实时…

RGMII接口及时序详解

文章目录 一、RGMII接口介绍二、MAC和PHY1.关系2.MAC和PHY的交互3.MAC为什么要配置PHY4.如何配置&#xff08;1&#xff09;原理&#xff08;2&#xff09;PHY地址的确定&#xff08;3&#xff09;寄存器地址及配置数据 三、88E1111中PHY的时序1.接收端时序&#xff08;1&#…