微信小程序实现长按删除图片的示例


Posted in Javascript onMay 18, 2018

说明

最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹

需求:

长按删除指定图片

微信小程序实现长按删除图片的示例

需要解决的问题

  1. 长按事件如何表示出来?
  2. 如何获取当前长按元素的下标?
  3. 如何删除元素?

解决办法

  1. 长按事件是用bindlongpress(不会跟点击事件bindtap冲突);
  2. 在wxml中添加索引index,然后在js中用currentTarget.dataset.index获取当前元素下标
  3. 通过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: 绑定的事件 子元素不会被触发事件

效果展示

微信小程序实现长按删除图片的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的无刷新分页技术
Jun 11 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
ES5新增数组的实现方法
May 12 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 #Javascript
Vue数据双向绑定原理及简单实现方法
May 18 #Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 #Javascript
Vue中对比scoped css和css module的区别
May 17 #Javascript
vue引用js文件的多种方式(推荐)
May 17 #Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 #Javascript
浅谈webpack-dev-server的配置和使用
May 17 #Javascript
You might like
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
PDO实现学生管理系统
2020/03/21 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Promise扫盲贴
2019/06/24 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python实现静态web服务器
2019/09/03 Python
is_file和file_exists效率比较
2021/03/14 PHP
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
二年级语文教学反思
2014/02/02 职场文书
成语的广告词
2014/03/19 职场文书
感恩教育活动总结
2014/05/05 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
红色影片观后感
2015/06/18 职场文书
校长新学期致辞
2015/07/30 职场文书
教师节主题班会教案
2015/08/17 职场文书