小程序实现长按删除图片

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

需要解决的问题
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: 绑定的事件 子元素不会被触发事件

效果展示

小程序实现长按删除图片相关推荐

微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
14、微信小程序——上传、预览、长按删除图片
1.上传多图多图上传的关键在于--渲染 Page({data:{images:[]},upload(){wx.chooseImage({count:9, //获取图片数量sizeType: ['or ...
ios手机苹果手机在小程序里面长按图片后点击事件失效问题
问题:ios手机苹果手机在小程序里面长按图片后,图片悬浮,然后点击事件都失效的问题. 解决办法:在img图片标签里加 css属性 -webkit-touch-callout: none; .如果是 ...
在c 语言里如何制作滑动图片大小,[教程]教你在微信小程序中实现手势缩放图片...
在小程序中,image 组件的 mode 有 12 种,其中只有三种是缩放模式.而在这三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片.此模式是保证图片长边完整地显示出来, ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序账号长时间未登录冻结解封
微信小程序账号长时间未登录冻结解封 1.账号找回链接[官方]:http://mp.weixin.qq.com/acct/findacct?action=scan 2.按照官方指引的三个操作步骤进操作, ...
小程序上传文字和图片到服务器并保存在数据库
简单来说是先执行upload到后台,controller将图片保存到服务器后将图片路径通过json返回小程序,在upload sucess时setData存储路径.然后调用wx.request.下面, ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...

小程序实现长按删除图片

小程序实现长按删除图片

小程序实现长按删除图片相关推荐

最新文章

热门文章