<view class="wancll-padded-15 wancll-bg-white wancll-font-size-14"> <view class="wancll-padded-l-5 wancll-padded-b-10">商品圖片:</view> <view class="comlist-image is-flex wancll-padded-l-5">  <view class='image-list' wx:if="{{imgs.length}}" wx:for="{{imgs}}" wx:key="key">   <zan-badge catchtap='deleltImage' data-id='{{index}}'>x</zan-badge>   <view class='add-image' catchtap='previewImage' data-id='{{index}}'>    <image class='up-img' src="{{item}}" mode="aspectFill" />   </view>  </view>  <view class='add-image' catchtap='addImage'>+</view> </view></view>

.comlist-image{ display: flex; flex-wrap: wrap}.comlist-image .image-list{ margin-right: 20rpx;}.comlist-image .up-img{ width: 100rpx; height: 100rpx;}.comlist-image .add-image{ width: 100rpx; height: 100rpx; padding: 10rpx; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; border-radius: 5px; font-size: 50rpx;}

data: {imgs:[]} // 添加圖片 addImage() {  if (this.data.imgs.length>=5){   APP.util.toast('商品圖片不能超過5張')   return  }  wx.chooseImage({   count: 1,   sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有   sourceType: ['camera', 'album'], // 可以指定來源是相冊還是相機，默認二者都有   success: function (res) {    // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片    var tempFilePaths = res.tempFilePaths;    wx.navigateTo({     url: "/pages/UploadImg/index?src=" + tempFilePaths    });   }  }); }, // 圖片預覽 previewImage(e) {  let id = APP.util.getDataSet(e, 'id')  wx.previewImage({   current: this.data.imgs[id],   urls: this.data.imgs,  }) }, // 刪除預覽圖片 deleltImage(e) {  let id = APP.util.getDataSet(e, 'id')  let arr = this.data.imgs  arr.splice(id, 1);  this.setData({   imgs: arr  }) },