微信小程序实现长按删除图片的示例
时间:2019-04-15
本文章向大家介绍微信小程序实现长按删除图片的示例,主要包括微信小程序实现长按删除图片的示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
说明
最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹
需求:
长按删除指定图片
需要解决的问题
- 长按事件如何表示出来?
- 如何获取当前长按元素的下标?
- 如何删除元素?
解决办法
- 长按事件是用bindlongpress(不会跟点击事件bindtap冲突);
- 在wxml中添加索引index,然后在js中用currentTarget.dataset.index获取当前元素下标
- 通过splice方法删除splice(index,1),删除一个当前元素
具体实现
<view class="uploader__files"> <block wx:for="{{images}}" wx:key="{{item.id}}" > <view class="uploader__file" bindlongpress="deleteImage" data-index="{{index}}"> <image mode="aspectFill" class="uploader__img" src="{{item.path}}" /> </view> </block> </view>
在wxml中添加 bindlongpress="deleteImage" data-index="{{index}}" 来绑定事件并添加索引index
deleteImage: function (e) { var that = this; var images = that.data.images; var index = e.currentTarget.dataset.index;//获取当前长按图片下标 wx.showModal({ title: '提示', content: '确定要删除此图片吗?', success: function (res) { if (res.confirm) { console.log('点击确定了'); images.splice(index, 1); } else if (res.cancel) { console.log('点击取消了'); return false; } that.setData({ images }); } }) }
删除部分的代码
注意currentTarget与target的区别
1. currentTarget:绑定的事件当前元素及其子元素都会触发
2. target: 绑定的事件 子元素不会被触发事件
效果展示
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 快速定位隐蔽的sql性能问题及调优(r5笔记第38天)
- 关于统计信息过期的性能落差(r5笔记第36天)
- 系统级alias vs Oracle ADR功能(r5笔记第35天)
- 关于收缩数据文件的尝试(r5笔记第34天)
- 搭建dataguard碰到的几个小问题(r5笔记第33天)
- TP-LINK 远程代码执行漏洞 CVE-2017-13772 趣谈
- 执行计划中的COLLECTION ITERATOR PICKLER FETCH导致的性能问题 (r5笔记第49天)
- dataguard switchover的自动化脚本实现 (r5笔记第48天)
- 曲折的dump导入及问题分析(r5笔记第47天)
- 对一道if-else相关的程序题的简单分析(r5笔记第45天)
- 持续近7个小时的索引扫描的查询优化分析 (r5笔记第44天)
- 04.Java对象和类
- 关于Oracle数据恢复的两个临界点(r5笔记第42天)
- 关于提问的一些建议(r5笔记第41天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Apache Curator操作zookeeper的API使用
- 使用Java API操作zookeeper的acl权限
- 使用ZooKeeper提供的原生Java API操作ZooKeeper节点
- CountDownLatch类的使用
- Spring-如何给静态变量注入值
- ZooKeeper的伪分布式集群搭建以及真分布式集群搭建
- zookeeper权限acl与四字命令
- 微信公众号开发-素材/消息管理接口
- 微信开发的一些神坑
- Spring Boot集成ElasticSearch实现简单的增删查改接口
- Spring Cloud Zuul 综合使用
- Spring Cloud Hystrix - 服务容错
- 记一次内存溢出问题的排查、分析过程及解决思路
- Spring Cloud Sleuth + Zipkin 实现服务追踪
- Docker化你的SpringBoot项目