微信小程序:九宫格选图

本文由清尘发表于2020-04-26 12:53属于移动前端分类

效果图:

九宫格选图

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/del.png" mode="scaleToFill" catchtap="deleteImv" data-id="{{index}}"></image>
    </view>
      
  </block>
    
  <!-- 选择添加图片 -->
  <view wx:if="{{chooseViewShow}}" class="chooseView" bindtap="chooseImage" style="border-radius:5px">
    <image class="chooseImv" src="/images/addImage.png"></image>
  </view>
</view>

WXSS代码:

.addImv{margin:20rpx; background-color: #eee; border:1px dashed gray; display: flex; flex-wrap: wrap; padding:5rpx 40rpx;}
.addImv .chooseView{width: 160rpx; height: 160rpx; background-color: #fff; margin:10rpx 23rpx; border:1px solid lightgray; text-align: center; line-height: 220rpx;}
.addImv .chooseImv{width: 50px; height: 50px;}
.addImv .upFile{margin:10rpx 25rpx; width: 160rpx; height: 160rpx; position: relative;}
.addImv .upFile .itemImv{width: 100%; height: 100%;}
.addImv .upFile .closeImv{position: absolute; right: 0; top:0; width: 50rpx; height: 50rpx;}

JS代码:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    chooseViewShow:true,
    imgArr:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  // 选择图片
  chooseImage:function(){
    var _this = this;
    wx.chooseImage({
      count:9 - _this.data.imgArr.length, //保证最多选择9张图
      sizeType:['original','compressed'], //可以指定是原图还是压缩图,默认二者都有
      sourceType:['album','camera'], //可以指定来源是相册还是相机,默认二者都有
      success:function(res){
        //返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        console.log(res.tempFilePaths);
        if(res.tempFilePaths.count == 0){
          return;
        }
        //显示图片
        var imgArrNow = _this.data.imgArr;
        //使用concat来拼接数组
        imgArrNow = imgArrNow.concat(res.tempFilePaths);
        console.log(imgArrNow);
        //图片数组赋值
        _this.setData({
          imgArr:imgArrNow
        })
        _this.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();
  },
  // 幻灯片预览图片
  showImage:function(e){
    var imgArr =this.data.imgArr;
    var itemIndex = e.currentTarget.dataset.id;
    wx.previewImage({
      current:imgArr[itemIndex],
      urls:imgArr
    })
  },
  // 是否隐藏图片选择
  chooseViewShow:function(){
    if(this.data.imgArr.length >= 9) {
      this.setData({
        chooseViewShow:false
      })
    }else{
      this.setData({
        chooseViewShow:true
      })
    }
  },
......
})