图片就是一个简单的效果
实现
先看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',
},
好了，可以了。