使用微信小程序来实现一个图片选择器的功能，可以添加图片，可以删除图片，可以大图浏览选中的图片。  效果图 下面说一下实现思路 1.首先实现页面的布局 整体图片选择使用一个view控件，前面选中的图片为一个block根据选择图片的数量来显示多少个，后面的选择图片按钮为一个view。选中图片上面的删除按钮，使用绝对定位和相对定位来处理。添加图片，删除图片，点击选中图片查看大图等添加一个点击事件 .wxss代码如下 [JavaScript] 纯文本查看 复制代码 .wxss文件如下 [JavaScript] 纯文本查看 复制代码 /*选择图片View*/.addImv{ margin: 20rpx 20rpx; height: 200rpx; background-color: #EEEEEE; border: 1px dashed gray; display: flex; align-items: center; padding: 0 20rpx;}/*添加图片*/.addImv .chooseView{ width: 160rpx; height: 160rpx; background-color: #ffffff; margin-left: 10rpx; border: 1px solid lightgray; text-align: center; line-height: 180rpx;}.addImv .chooseImv{ width: 50rpx; height: 50rpx;}/*已选择的图片*/.addImv .upFile{ margin-left: 10rpx; width: 160rpx; height:160rpx; position: relative;}.addImv .upFile .itemImv{ width: 100%; height: 100%;}.addImv .upFile .closeImv{ position: absolute; right: 0rpx; top: 0rpx; width: 50rpx; height:50rpx;}2.下面来写.js逻辑代码 (1) 首先在data中定义我们要用到的imgArr:[]图片数组，chooseViewShow:true是否显示添加图片控件。 当点击图片的时候，调用微信小程序APIwx.chooseImage获取到选中的图片数组，需要注意的是，每次选择的图片个数为：4-已选择的图片个数。 把选中的图片数组添加到所有选中的图片数组中 [JavaScript] 纯文本查看 复制代码 var imgArrNow = that.data.imgArr;imgArrNow = imgArrNow.concat(res.tempFilePaths); (2) 点击删除图片的时候，获取到点击图片的下标，然后从数组中移除 [JavaScript] 纯文本查看 复制代码 var imgArr = this.data.imgArr;var itemIndex = e.currentTarget.dataset.id;imgArr.splice(itemIndex, 1); (3) 每一次选择完图片，或者删除完图片的时候，都看一下是否要显示添加图片控件 [JavaScript] 纯文本查看 复制代码 chooseViewShow: function () { if (this.data.imgArr.length >= 4) { this.setData({ chooseViewShow: false }) } else { this.setData({ chooseViewShow: true }) } },(4) 点击已经选中的图片的时候，获取下标，然后调用微信小程序wx.previewImage查看大图。 整体js代码如下 [JavaScript] 纯文本查看 复制代码 Page({ data: { imgArr: [], chooseViewShow: true, }, onLoad: function () { }, /** 选择图片 */ chooseImage: function () { var that = this; wx.chooseImage({ count: 4 - that.data.imgArr.length,//最多选择4张图片 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 console.log(res.tempFilePaths); if (res.tempFilePaths.count == 0) { return; } //上传图片 //显示图片 var imgArrNow = that.data.imgArr; imgArrNow = imgArrNow.concat(res.tempFilePaths); console.log(imgArrNow); that.setData({ imgArr: imgArrNow }) that.chooseViewShow(); } }) }, /** 删除图片 */ deleteImv: function (e) { var imgArr = this.data.imgArr; var itemIndex = e.currentTarget.dataset.id; imgArr.splice(itemIndex, 1); console.log(imgArr); this.setData({ imgArr: imgArr }) //判断是否隐藏选择图片 this.chooseViewShow(); }, /** 是否隐藏图片选择 */ chooseViewShow: function () { if (this.data.imgArr.length >= 4) { this.setData({ chooseViewShow: false }) } else { this.setData({ chooseViewShow: true }) } }, /** 显示图片 */ showImage: function (e) { var imgArr = this.data.imgArr; var itemIndex = e.currentTarget.dataset.id; wx.previewImage({ current: imgArr[itemIndex], // 当前显示图片的http链接 urls: imgArr // 需要预览的图片http链接列表 }) },}) 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
