小程序选择显示多张图片
1、wxml代码(里面的类名大部分是公用样式,所以wxss样式就不写出来了)
<view class="align-items"><view wx:for="{{info.licensePicUrls}}"><image data-src="{{item}}" src="{{item}}" wx:if="{{imgShow}}" bindtap="previewImage"></image></view><view class="img-list align-items flex-column space-center" bindtap='buttonclick'><view class="hui font-56">+</view><view class="hui">添加照片</view></view></view>
2、js代码
data:{info: {licensePicUrls: [],},imgShow:false}// 图片显示buttonclick: function () {var that = thiswx: wx.showActionSheet({itemList: ['拍照', '从手机相册选择'],itemColor: '',success: function (res) {wx.chooseImage({count: 2,//最多选2张sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success (res) {console.log('res',res)const tempFilePaths = res.tempFilePathsthat.setData({"info.licensePicUrls":tempFilePaths,imgShow:true})}})},fail: function (res) {console.log('取消',res.errMsg);},complete: function (res) {},})},//图片预览previewImage(e) {const current = e.target.dataset.src //获取当前点击的 图片 urlwx.previewImage({current,urls: this.data.info.licensePicUrls})},
3、效果图(选择一张就只显示一张,选择两张就两张)