我是靠谱客的博主 唠叨铃铛,这篇文章主要介绍微信小程序-上传照片-多张显示,现在分享给大家,希望可以做个参考。

图片就是一个简单的效果

实现

先看wxml和wxss代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

  

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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代码吧
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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里

复制代码
1
2
3
4
5
6
7
8
9
data: { arrReview: ['1', '2', '3'], arrAdress: ['你家', '我家', '如家'], img1: '/images/addimg.png', img2: '/images/addimg.png', img3: '/images/addimg.png', img4: '/images/addimg.png', },

  好了,可以了。

转载于:https://www.cnblogs.com/yuobey/p/10287612.html

最后

以上就是唠叨铃铛最近收集整理的关于微信小程序-上传照片-多张显示的全部内容,更多相关微信小程序-上传照片-多张显示内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(75)

评论列表共有 0 条评论

立即
投稿
返回
顶部