小程序中实现选择预览图片同时可以实现长按删除图片的代码（小程序自定义图片预览）

小程序中实现选择预览图片同时可以实现长按删除图片的代码（小程序自定义图片预览）

本篇文章给大家带来的内容是关于小程序中实现选择预览图片同时可以实现长按删除图片的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近在做一个小程序的项目，初次接触，也是边学边做，目前遇到图片处理的相关问题，在此记录，也对有需要的朋友提供一些帮助。类似于微信朋友圈发布图片，长按指定图片删除

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

长按图片删除，不足9张可以继续添加

图片预览效果

实现思路：

调整页面，实现展示效果使用wx.chooseImage实现拍照和选择照片使用wx.previewImage实现图片预览使用bindlongpress自定义图片删除功能

话不多说，上代码： wxml代码

图片上传 {{files.length}} / 9 -

js代码

Page({ data: { files: [] }, chooseImage: function(e) { var that = this; var images = that.data.files; wx.chooseImage({ count: 9 - images.length, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function(res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 that.setData({ files: that.data.files.concat(res.tempFilePaths) }); } }) }, previewImage: function(e) { wx.previewImage({ current: e.currentTarget.id, urls: this.data.files }) }, deleteImage: function(e) { var that = this; var images = that.data.files; var index = e.currentTarget.dataset.index; //获取当前长按图片下标 wx.showModal({ title: '系统提醒', content: '确定要删除此图片吗？', success: function(res) { if (res.confirm) { images.splice(index, 1); } else if (res.cancel) { return false; } that.setData({ files: images }); } }) }})-

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。