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

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

时间:2024-05-25 08:57:10浏览次数:15  
标签:none longpress 删除 title 微信 app res uni showToast

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('用户点击取消');
      }
    }
  });
};

 

标签:none,longpress,删除,title,微信,app,res,uni,showToast
From: https://blog.csdn.net/qq_52602294/article/details/139167837

相关文章

  • uniapp快速分享知识点,请求简单封装 登陆 ,支付 , 分享 , 短信,
    第一部份requrety请求封装 备注:关于环境配置ui选择插件安装在我的另一个帐号中前几天也经写了,这个博客就不用在写一遍了另一博客地址:https://www.cnblogs.com/ZzwWan/p/18202502module.exports=(vm)=>{//初始化请求配置uni.$u.http.setConfig((config)=>{......
  • 微信小程序中的一些事件以及语法
    【事件绑定】基本使用新建项目,使用模板可以选择:JS基础版本#1方式一<viewbind:tab="js中写方法"></view>#2方式二<viewbindtab="js中写方法"></view>#3js中写方法showLog(){console.log("我被点了")}1vxml234<!--index......
  • 微信小程序
    【小程序概述】1微信小程序是一种运行在微信内部的轻量级应用程序2小程序无需下载和安装,只需要在微信中下拉,搜一搜或扫一扫搜索点击使用即可3大前端概念 【微信小程序账号注册】1#1访问【微信公众平台】,注册一个微信小程序账号2-https://mp.......
  • prometheus 监控并发告警给企业微信
    一、部署prometheus采集系统数据的工具时序图1.1、部署node_exportenode_exporter是prometheus的一部分,用来装在被监控的服务器上下载地址:https://prometheus.io/download/#1、解压安装包tar-zxvfnode_exporter-1.7.0.linux-amd64.tar.gz#2、启动默认监听9100......
  • 看广告收益小游戏app对接聚合SDK广告开发
    将专业的广告变现交给专业的第三方来打理,轻松获得广告变现收益,本文就带你读懂什么是聚合SDK广告。01聚合SDK是什么?通过技术能力将多个预算进行集成,让开发者可以一键接入多个预算资源,从而减轻开发者的对接成本,实现广告变现的目的。开发者接入一家聚合SDK广告等同于接入多......
  • uni-app 使用地区选择 组件
    问题描述: 使用uni-app时发现没有现成可用的地区选择组件,通过插件市场找了两个,大部分都是vue2,不兼容vue3,也不是那么好用,后来找了一个直接兼容vue3的 插件地址将其封装成组件,在需要的地方进行调用   <cityPickerref='cityPickerRef':column="3":default-value="for......
  • 充电桩——微信小程序,缴纳的1000元交易保障金,问题解答。
    1、小程序后台,申请退款保障金有一条不符合要求,无法退款。 2、咨询客服,能否退款然后再以公司名义缴纳保证金,等待回复:暂不支持对公转账,只能微信扫码支付缴纳哈。退保的话,支持退回对公账户。详情请查看小程序交易保证金管理规定https://developers.weixin.qq.com/miniprogram/de......
  • uniapp中,首先显示一个大的地图,点击地图上的点,缩小地图并且在下方显示地图上的点对应的
    <template><viewclass="content"><mapid="map":style="{width:'100%',height:selectedMarker.title?'50vh':'76vh',zIndex:'500'}":markers="markers&quo......
  • SwiftUI中的手势(TapGesture、LongPressGesture、GestureState的使用)
    手势操作在App中可谓是用途非常广泛了,常规的手势修饰符有TapGesture点击手势、LongPressGesture长按手势、DragGesture拖拽手势,MagnificationGesture放缩手势和RoationGesture旋转手势。和常规的修饰符方法类似,只要将手势修饰符添加到视图中,系统就会自动识别用户的操作,并......
  • 微信小程序--微信开发者工具使用小技巧(3)
    一、微信开发者工具使用小技巧1、快速创建小程序页面在app.json中的pages配置项,把需要创建的页面填写上去2、快捷键使用进入方式1:文件–>首选项–>keyboardshortcuts进入快捷键查看与设置进入方式2:设置–>快捷键设置注释单行注释的快捷键:ctrl+‘/’多行......