草庐IT

微信小程序选择图片可删除,可查看大图

低调滴开发 2024-03-15 原文

废话不多说,直接上代码!!!

在wxml文件中添加如下代码:

  <view class="add_img_bg">

    <view class='imagess' wx:for="{{img_url}}" data-id="{{index}}" >

      <image class="moment_img" src="{{item.tempFilePath}}" bindtap="openclickImage" data-item="{{item}}"></image>

      <image class="closeImv" src="../../images/chacha.png" mode="scaleToFill" catchtap="deleteImvBanner"  data-index="{{index}}" data-id="{{index}}"></image>

    </view>

    <view class='imagess' style='display:{{hideAdd?"none":"block"}}'>

      <image bindtap="chooseimage" src="/images/add_img.png" class="moment_img" ></image>

    </view>

  </view>

所需切图:

                       

 

 

在wxss文件中添加class样式:

.add_img_bg{

  width: auto;

  display: flex;

  flex-wrap: wrap;

  margin-top: 14px;

  margin-left: 15px;

  margin-right: 15px;

}

.imagess{

  width:31%;

  height: 100px;

  padding: 2px;

  position: relative;

.moment_img{

  width: 98px;

  height: 98px;

  background: #F2F2F2;

  border-radius: 10px;

}

.closeImv {

  position: absolute;

  right: 20rpx;

  top: 0rpx;

  width: 50rpx;

  height: 50rpx;

}

在js文件中编辑功能代码:

data里面初始化img_url:[],

选择图片:

chooseimage:function(){

    var that = this;

    var length = that.data.img_url.length;

    var num = 5-length;

    wx.chooseMedia({

      count:num,

      mediaType: ['image'],

      sourceType: ['album', 'camera'],

      camera: 'back',

      success(res) {

        console.log(res.tempFiles)

        //把每次选择的图push进数组

        var img_url = that.data.img_url;

        for (var i = 0; i < res.tempFiles.length; i++) {

          img_url.push(res.tempFiles[i])

        }

        that.setData({

          img_url: img_url

        })

        if (img_url.length>0){

          //图如果满了5张,不显示加图

          if (img_url.length >= 5){

            that.setData({

              hideAdd:1

            })

          }else{

            that.setData({

              hideAdd: 0

            })

          }

        }

      }

    })

  },

删除已选择图片:

  deleteImvBanner:function(e){

    var that = this;

    console.log(e);

    var img = that.data.img_url;

    var temArray=[];

    console.log("删除 =   ",e.currentTarget.dataset.index);

    for(var i=0;i<img.length;i++){

      if(i!=e.currentTarget.dataset.index){

        temArray.push(img[i]);

      }

    }

    that.setData({

      img_url:temArray,

    })

    if (temArray.length>0){

      //图如果满了5张,不显示加图

      if (temArray.length >= 5){

        that.setData({

          hideAdd:1

        })

      }else{

        that.setData({

          hideAdd: 0

        })

      }

    }

  },

点击查看大图:

  openclickImage: function (e) {

    var self = this;

    console.log("查看大图 ",e);

    var url = e.currentTarget.dataset.item.tempFilePath;

    wx.previewImage({

      current: url,

      urls: [url],

      fail: function () {

        console.log('fail')

      },

      complete: function () {

        console.info("点击图片了");

      },

    })

  },

 

有关微信小程序选择图片可删除,可查看大图的更多相关文章

  1. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据,就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理?我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题;这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML,但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中,将我的XML代码修改为

  2. ruby - 我可以使用 Ruby 从 CSV 中删除列吗? - 2

    查看Ruby的CSV库的文档,我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列,但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  3. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗? - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后,每个操作都应在S3上回滚。S3Object这可能吗?? 最佳答案 虽然S3API具有批量删除功能,但它不支持事务,因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST),因此每个上传操作都是通过一个独立的API调用完成的

  4. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手,所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格,我想要的三列是:公司名称、公司描述和Logo。对于名称,我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串,然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列? 最佳答案 对于“文本”数

  5. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基

  6. ruby - 如何安全地删除文件? - 2

    在Ruby中是否有Gem或安全删除文件的方法?我想避免系统上可能不存在的外部程序。“安全删除”指的是覆盖文件内容。 最佳答案 如果您使用的是*nix,一个很好的方法是使用exec/open3/open4调用shred:`shred-fxuz#{filename}`http://www.gnu.org/s/coreutils/manual/html_node/shred-invocation.html检查这个类似的帖子:Writingafileshredderinpythonorruby?

  7. ruby-on-rails - 标准化文件名的字符串,删除重音和特殊字符 - 2

    我正在尝试找到一种方法来规范化字符串以将其作为文件名传递。到目前为止我有这个:my_string.mb_chars.normalize(:kd).gsub(/[^\x00-\x7F]/n,'').downcase.gsub(/[^a-z]/,'_')但第一个问题:-字符。我猜这个方法还有更多问题。我不控制名称,名称字符串可以有重音符、空格和特殊字符。我想删除所有这些,用相应的字母('é'=>'e')替换重音符号,并将其余的替换为'_'字符。名字是这样的:“Prélèvements-常规”“健康证”...我希望它们像一个没有空格/特殊字符的文件名:“prelevements_routin

  8. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  10. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

随机推荐