E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

wxml:  view class=”gallery”    !–显示图片–    view class=”item” wx:for=”{{images}}” wx:key=”index”      image src=”{{item}}” data-src=”{{item}}” bindtap=”previewImage” mode=”aspectFit” /      !– 删除按钮 —      view class=”delete” bindtap=”delete” data-index=”{{index}}”        image src=’../image/delete.png’ mode=”widthFix”/image      /view    /view    !–添加图片–    view class=”item2″ bindtap=”chooseImage”      view class=’addIcon’+/view    /view  /viewwxss:.gallery {  background: #fff;  display: flex;  justify-content: flex-start;  flex-wrap: wrap;  padding-bottom: 80px;}/*每张图片所占容器*/.item {  position: relative;  margin: 10rpx 2%;  width: 46%;  height: 442rpx;  background: #f3f3f3;}.item image {  width: 100%;  height: 100%;}/*add按钮*/.item2 {  margin: 10rpx 2%;  width: 45%;  height: 442rpx;  text-align: center;  line-height: 442rpx;  font-size: 200rpx;  background: #fff;  color: #e4e5ea;  border: 1px dashed #e4e5ea;}/*删除按钮*/.delete {  width: 100%;  position: absolute;  left: 0;  bottom: 0;  height: 80rpx;  font-size: 22rpx;  text-align: center;  background-color: rgba(0, 0, 0, 0.3);  display: none;}.delete image {  width: 44rpx;  margin-top: 22rpx;}重点来了,js:Page({  data: {    images: [],    pathsTmp: []  },  // 本地选择照片上传  chooseImage: function() {    var that = this    wx.chooseImage({      count: 9,      sizeType: [‘compressed’],      sourceType: [‘album’, ‘camera’],      success: function(res) {        that.setData({          //上传完并显示照片          images: that.data.images.concat(res.tempFilePaths)        });      }    })  },  // 删除照片  delete: function(e) {    var that = this;    var index = e.currentTarget.dataset.index;    var images = that.data.images;    images.splice(index, 1);    that.setData({      images: images    });  },})

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序手机照片上传和删除
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏