小程序上传图片放大以及滑动浏览、删除

小程序上传图片放大以及滑动浏览

1.wxml代码实例

<view wx:for="{{repairPic}}" wx:key="{{item.id}}">

<image class='s_pic' src='{{item}}' data-list="{{repairPic}}" data-index="{{index}}" catchtap="previewImage"></image>

</view>

2.js代码块

// 预览图片

previewImage:function(e){

var index = e.currentTarget.dataset.index;//点击放大图片的下标

var list = e.currentTarget.dataset.list;//需要预览图片的列表

wx.previewImage({

current: index,

urls: list

})

}

小程序上传图片删除

1.wxml代码块

<view wx:for="{{repairPic}}" wx:key="{{item.id}}">

<image src="/images/menu/delete.png" class="delete" catchtap="deleteImg" data-index="{{index}}"></image>

</view>

2.js代码块

//删除图片

deleteImg: function (e) {

var index = e.currentTarget.dataset.index;

var that = this;

var images = that.data.repairPic;

images.splice(index,1);//第一个参数是移除哪一张、第二个参数是移除一张

that.setData({

repairPic:images

});

}