效果图
思路:
整体图片选择使用一个 view 控件, 前面选中的图片为一个 block 根据选择图片的数量来显示多少个, 后面的选择图片按钮为一个 view. 选中图片上面的删除按钮, 使用绝对定位和相对定位来处理. 添加图片, 删除图片, 点击选中图片查看大图等添加一个点击事件
考虑问题:
1. 上传的多少张图片?
2. 上传后想删除?
3. 如何控制布局, 用好用 flex 布局.
关键代码:
- /** 选择图片 */
- chooseImage: function () {
- var that = this;
- wx.chooseImage({
- count: 9 - that.data.imgArr.length,
- sizeType: ['original', 'compressed'],
- sourceType: ['album', 'camera'],
- success: function (res) {
- if (res.tempFilePaths.count == 0) {
- return;
- }
- // 上传图片
- var imgArrNow = that.data.imgArr;
- imgArrNow = imgArrNow.concat(res.tempFilePaths);
- that.setData({
- imgArr: imgArrNow
- })
- that.chooseViewShow();
- }
- })
- },
代码中的 9 是中最多传 9 张图片, 图片类型是否为压缩, 图片来源是相册还是相机.
- /** 删除图片 */
- deleteImv: function (e) {
- var imgArr = this.data.imgArr;
- var itemIndex = e.currentTarget.dataset.id;
- imgArr.splice(itemIndex, 1);
- this.setData({
- imgArr: imgArr
- })
- // 判断是否隐藏选择图片
- this.chooseViewShow();
- },
删除照片, 改变布局格式显示.
- /** 是否隐藏图片选择 */
- chooseViewShow: function () {
- if (this.data.imgArr.length>= 9) {
- 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 链接列表
- })
- },
用到系统自带的方法, 点击图片预览大图.
demo 地址为: https://github.com/dt8888/moreImgaes
来源: http://www.jianshu.com/p/296680d6b173