700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 小程序选择显示多张图片

小程序选择显示多张图片

时间:2024-05-01 01:11:00

相关推荐

小程序选择显示多张图片

小程序选择显示多张图片

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、效果图(选择一张就只显示一张,选择两张就两张)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。