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


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 相关文章推荐
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
React优化子组件render的使用
May 12 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
js选择器全面解析
2016/06/27 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Python爬虫实现(伪)球迷速成
2018/06/10 Python
python3.7.0的安装步骤
2018/08/27 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python 防止死锁的方法
2020/07/29 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
PHP开发的一般流程
2013/08/13 面试题
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
Java servlet面试题
2012/03/04 面试题
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
材料采购员岗位职责
2013/12/17 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
合作意向协议书
2015/01/29 职场文书
被告答辩状范文
2015/05/22 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
5道关于python基础 while循环练习题
2021/11/27 Python