小程序点击删除图片或者内容

最新推荐文章于 2024-05-09 16:34:31 发布

qinyong^_^

最新推荐文章于 2024-05-09 16:34:31 发布

阅读量4.3k

点赞数

本文介绍了一个简单的小程序功能——用户可以删除已上传的图片。通过JavaScript代码实现了从图片数组中移除指定图片的功能，并更新了小程序的数据状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

deleteImg: function (e) {
  var imgs = this.data.imgs;
  var index = e.currentTarget.dataset.index;
  imgs.splice(index, 1);
  this.setData({
   imgs: imgs
  });
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qinyong^_^

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序实现上传图片/预览放大/删除图片功能

hiro_1015的博客

03-01

9709

// pages/common/uploadImage.js const netUtil = require("../../utils/netUtil"); const util = require("../../utils/util.js"); import {colors} from '../../utils/colors'; var app = getApp(); Page({ ...

微信小程序本地上传图片预览并删除

lfkabb的博客

09-23

633

微信小程序本地上传图片，在小程序开发文档上面有说明： wx.chooseImage(Object object) | 微信开放文档 wx.previewImage(Object object) | 微信开放文档 wxml: 图片用wx:for循环，后面用带有加号的图片。 <view class="content"> <text>微信小程序练习demo</text> <view class="upload"> ..

参与评论您还未登录，请先登录后发表或查看评论

小程序实现长按删除图片

weixin_33737774的博客

05-17

654

小程序实现长按删除图片说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长按事件是用bindlongpress(不会跟点击事件bindtap冲突); 在wxml中添加索引index,然后在js中用curren...

微信小程序实现上传多张图片，删除图片

2401_84093899的博客

05-09

559

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

微信小程序 上传、预览、删除图片

weixin_45789931的博客

05-05

1261

页面view代码 <view class="allImgBox"> <view class="img_num">{{imgs.length}}/3</view> <view class="imgBox" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{item}}" data-index="{{index}}" mode="aspectFill.

微信小程序、展开/收起、组件、省略号点击后展示内容

04-05

通过以上分析，我们可以看出，"微信小程序、展开/收起、组件、省略号点击后展示内容"这个主题涵盖了小程序开发中的核心技术和用户体验设计原则。理解并掌握这些知识点，对于构建高效、友好的微信小程序至关重要。

小程序上传图片视频文件(带删除功能)demo

08-08

在微信小程序中，上传图片和视频文件是一项常见的功能，它涉及到用户...以上是实现“小程序上传图片视频文件(带删除功能)demo”所需的主要技术点。实际开发时，还需要根据具体需求和服务器环境进行适当的调整和优化。

微信小程序多图上传(支持指定压缩大小，带删除按钮)

07-15

首先，我们需要引入微信小程序的API，如`wx.chooseImage`用于选取图片，`wx.saveFile`用于保存图片到本地，`wx.uploadFile`用于上传图片到服务器，以及`wx.showModal`用于显示删除确认对话框。 1. **多图选择**：...

uniapp 微信小程序 长按删除图片

weixin_64103049的博客

10-24

737

uniapp 微信小程序 长按删除图片

微信小程序实现图片上传、删除和预览功能的方法

08-28

主要介绍了微信小程序实现图片上传、删除和预览功能的方法,涉及微信小程序界面布局、事件响应及图片操作相关实现技巧,需要的朋友可以参考下

微信小程序之删除元素

weixin_41962085的博客

05-26

7182

通常我们想要在原有的数组上删除元素的时候，该怎么做呢？下面用实例说明下： 小程序js页面的data： data:{ list:['a','b','c'] } 在方法里面，当我们要删除的时候： method:function(){ var index = 1; this.data.list.splice(index,1) this.setData({ ...

小程序多图删除

zl_j_c的博客

06-21

317

　　　　　　　　　　　　　　<view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> ...

小程序单张图片

qq_36437172的博客

07-24

482

<view class="gallery"> <view class='tipTitle'> 快去上传自己的照片吧 </view> <view class='item-ot'> <view class="item">  <view class=&qu

微信小程序云开发上传图片和删除图片

Dipper_Dubhe的博客

06-17

2098

微信小程序云开发之图片上传与删除

微信小程序 【给图片加上删除图标】

咕噜

01-31

2062

【解决：】 <view wx:for="{{imgList}}" wx:key="index"> <image src="../../images/deletee.png" style="position: absolute;margin: 20rpx;width: 50rpx;height: 50rpx;"></image> <image src="{{item}}" style="height: 400rpx;width: 95%;margin

小程序单张图片和九宫格图片上传、预览、删除示例

weixin_33724570的博客

09-20

226

Demo下载地址：https://github.com/ybx13579/xiaochengxu-uploadImg 1、九宫格图片（一次性多张）上传预览删除代码地址：https://www.cnblogs.com/cqlb/p/9682505.html#t8效果图： 2、单张图片（单词）上传：（以下全部复制即可查看效果）示例图：Wxml: <view class...

微信小程序---手机照片上传和删除

张新丁

03-12

1089

wxml： <view class="gallery">  <view class="item" wx:for="{{images}}" wx:key="index"> <image src="{{item}}" data-src="{{item

微信小程序实现带单选框图片上传、预览、删除功能

li222248的博客

05-14

1385

功能图：功能图： .wxml:  <view class="uploader"> <view class="uploader-text">相册</view> <view class="uploade-box">  <view class="uploader-showItem" wx:for="{{imagesList}

小程序点击图片查看大图并删除

最新发布

03-15

### 实现微信小程序点击图片预览并支持删除功能为了实现微信小程序中点击图片查看大图并支持删除的功能，可以通过自定义页面来替代 `wx.previewImage` API 的默认行为。以下是具体方法： #### 自定义图片预览组件通过创建一个新的页面作为图片预览界面，在该界面上展示当前选中的图片列表，并提供删除按钮或其他自定义操作。 1. **传递参数** 在跳转到图片预览页时，将图片数组以及当前索引位置作为参数传入新页面。这可以通过 `wx.navigateTo` 方法完成[^1]。 ```javascript wx.navigateTo({ url: '/pages/imagePreview/index?images=' + JSON.stringify(imageArray) + '&current=' + currentIndex, }); ``` 2. **接收参数** 在目标页面加载时解析接收到的参数，并将其绑定到数据模型上以便渲染。 ```javascript Page({ data: { images: [], current: '' }, onLoad(options) { const { images, current } = options; this.setData({ images: JSON.parse(images), current }); } }); ``` 3. **显示图片与操作按钮** 使用 `<swiper>` 组件配合动态生成的操作按钮（如删除），允许用户滑动切换不同图片的同时执行特定动作。 ```html <view class="preview-container"> <swiper indicator-dots="{{true}}" autoplay="{{false}}"> <block wx:for="{{images}}" wx:key="*this"> <swiper-item> <image src="{{item}}" mode="aspectFit"></image> </swiper-item> </block> </swiper>  <button bindtap="deleteImage">删除</button> </view> ``` 4. **处理删除逻辑** 当触发删除事件时，更新本地图片数组并将修改后的结果返回给前一页或同步至服务器。 ```javascript deleteImage() { let { images, current } = this.data; // 移除指定索引处的图片 images.splice(current, 1); if (images.length === 0 || parseInt(current) >= images.length) { current = '0'; // 如果已无更多图片，则重置为第零张 } this.setData({ images, current }); // 将最新状态通知父级页面或者保存更改到数据库/云端 wx.navigateBack({ success(res) { var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; prevPage.updateImages(images); // 调用回调函数刷新原页面的数据 } }); } ``` 5. **优化用户体验** 可进一步增强交互体验，比如增加确认提示框、动画效果等[^4]。 --- ### 完整流程总结上述方案利用了微信小程序的基础能力构建了一个灵活可控的图片管理机制，既满足了即时删除的需求又保留了一定程度上的扩展空间[^2]。值得注意的是，如果涉及到了云开发场景下还需要注意配置好对应的环境 ID 和权限验证等问题[^3]。 ```python # 示例代码片段仅用于演示目的 def example_function(): pass ```