小程序教学十(图片选择Dome)

96
遛遛食
2018.09.07 15:38* 字数 416

使用微信小程序来实现一个图片选择器的功能,可以添加图片,可以删除图片,可以大图浏览选中的图片。


效果图

下面说一下实现思路

1.首先实现页面的布局

整体图片选择使用一个view控件,前面选中的图片为一个block根据选择图片的数量来显示多少个,后面的选择图片按钮为一个view。选中图片上面的删除按钮,使用绝对定位和相对定位来处理。添加图片,删除图片,点击选中图片查看大图等添加一个点击事件
.wxml代码如下

<view class="addImv">
    <!--这个是已经选好的图片-->
    <block wx:for="{{imgArr}}" wx:key="key">
        <view class="upFile" bindtap="showImage" style="border-radius: 5px" data-id="{{index}}">
            <image class="itemImv" src="{{item}}"></image>
            <image class="closeImv" src="../../images/delete.png" mode="scaleToFill" catchtap="deleteImv"  data-id="{{index}}"></image>
        </view>
    </block>
    <!--这个是选择图片-->
    <view class="chooseView" bindtap="chooseImage" style="border-radius: 5px" wx:if="{{chooseViewShow}}">
        <image class="chooseImv" src="../../images/addImage.png"></image>
    </view>
</view>

.wxss文件如下

/*选择图片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-已选择的图片个数。
把选中的图片数组添加到所有选中的图片数组中

var imgArrNow = that.data.imgArr;
imgArrNow = imgArrNow.concat(res.tempFilePaths);

(2) 点击删除图片的时候,获取到点击图片的下标,然后从数组中移除

var imgArr = this.data.imgArr;
var itemIndex = e.currentTarget.dataset.id;
imgArr.splice(itemIndex, 1);

(3) 每一次选择完图片,或者删除完图片的时候,都看一下是否要显示添加图片控件

chooseViewShow: function () {
    if (this.data.imgArr.length >= 4) {
      this.setData({
        chooseViewShow: false
      })
    } else {
      this.setData({
        chooseViewShow: true
      })
    }
  },

(4) 点击已经选中的图片的时候,获取下标,然后调用微信小程序wx.previewImage查看大图。



整体js代码如下

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链接列表
    })
  },
})

持续更新中...

微信小程序