微信小程序-上传照片-多张显示

图片就是一个简单的效果

实现

先看wxml和wxss代码

 <view class='in-demand'>
    <view class='dema-title'>
      <text>上传图片：（最少1张）</text>
    </view>
    <view class='demand-col  demand-col2'>
      <view class='up-img' bindtap="chooseImg">
        <image src="{{img1}}" catchTap="chooseImageTap" mode="aspectFit"></image>
      </view>
      <view class='up-img' bindtap="chooseImg">
        <image src="{{img2}}" catchTap="chooseImageTap" mode="aspectFit"></image>
      </view>
      <view class='up-img' bindtap="chooseImg">
        <image src="{{img3}}" catchTap="chooseImageTap" mode="aspectFit"></image>
      </view>
      <view class='up-img' bindtap="chooseImg">
        <image src="{{img4}}" catchTap="chooseImageTap" mode="aspectFit"></image>
      </view>
    </view>
  </view>

.demand-col {
  margin: auto;
  height: 140rpx;
  width: 80%;
  background: #f1f1f1;
  border-radius: 20rpx;
  font-size: 24rpx;
  padding: 30rpx 30rpx;
  display: flex;
}

.demand-col textarea {
  height: 240rpx;
  width: 600rpx;
}

.up-img {
  height: 136rpx;
  width: 136rpx;
  border: 1px solid #fff;
  background: #fff;
  margin-left: 10rpx;
}

.up-img image {
  height: 136rpx;
  width: 136rpx;
}

多放几个图片imges的盒子里面图片的路径分别取微信小程序选择图片方法里的

wx.chooseImage图片数组下标不一样的图片路径

说不清楚还是看一下JS代码吧

 chooseImg: function() {
    var that = this;
    wx.chooseImage({
      count: 5, // 默认9  
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
      success: function(res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
        console.log(res)
        that.setData({
          img1: res.tempFilePaths[0],
          img2: res.tempFilePaths[1],
          img3: res.tempFilePaths[2],
          img4: res.tempFilePaths[3],
        })
      }
    })
  },

　　其中img1~img4 分别是存在data里

  data: {
    arrReview: ['1', '2', '3'],
    arrAdress: ['你家', '我家', '如家'],
    img1: '/images/addimg.png',
    img2: '/images/addimg.png',
    img3: '/images/addimg.png',
    img4: '/images/addimg.png',
  },

　　好了，可以了。

微信小程序-上传照片-多张显示

猜你喜欢