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


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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
JavaScript 常用函数
Dec 30 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
JS正则表达式验证密码强度
Mar 18 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
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php字符集转换
2017/01/23 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
如何打开WebSphere远程debug
2014/10/10 面试题
2014年清明节寄语
2014/04/03 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
师范生小学见习总结
2015/06/23 职场文书
创业计划书之宠物店
2019/09/19 职场文书
python实现简单区块链结构
2021/04/25 Python
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
详解Python flask的前后端交互
2022/03/31 Python