标签：box flex center align pic width 评价 uni 上传

效果：

结构代码：

 1 <!-- 4、上传图片 -->
 2                     <view class="addbox1_son2">
 3                         <view class="pic-box">
 4                             <view class="pic-box-son" v-for="(picitem,picindex) in picArr" :key="picindex">
 5                                 <!-- 删除按钮 -->
 6                                 <view class="delbtn" @tap="delpic(picindex)"></view>
 7                                 <image :src="picitem" ></image>
 8                             </view>
 9                             <view v-show="picArr.length<5" class="pic-box-son" @tap="sendImg">
10                                 <view>点击<br>上传图片</view>
11                                 <view>（最多5张）</view>
12                             </view>
13                         </view>
14                     </view>

样式：

 1     .addbox1_son2 {
 2         width: 750rpx;
 3         display: flex;
 4         flex-wrap: wrap;
 5         /* flex-direction: row; */
 6         /* align-items: center; */
 7         padding-top: 20rpx;
 8         padding-bottom: 20rpx;
 9         border-bottom: 2rpx solid rgba(0,0,0,.1);
10     }
11 
12     .pic-box {
13         width: 750rpx;
14         display: flex;
15         flex-wrap: wrap;
16         align-items: center;
17         /* justify-content: center; */
18     }
19     .pic-box-son {
20         display: flex;
21         flex-direction: column;
22         align-items: center;
23         justify-content: center;
24         margin-left: 20rpx;
25         margin-bottom: 20rpx;
26         width: 152rpx;
27         height: 152rpx;
28         padding: 4rpx;
29         border-radius: 6rpx;
30         border: 2rpx dashed rgba(0,0,0,.2);
31     }
32     .pic-box-son image {
33         width: 100%;
34         height: 100%;
35         border-radius: 6rpx;
36     }
37     .pic-box-son>view:first-child {
38         font-size: 28rpx;
39         color: #565656;
40         text-align: center;
41     }
42     .pic-box-son>view:last-child  {
43         font-size: 24rpx;
44         color: #a7a7a7;
45         text-align: center;
46     }
47 
48     .delbtn {
49         width: 100%;
50         position: relative;
51         text-align: center;
52         line-height: 32rpx;
53         font-size: 46rpx;
54     }
55     .delbtn::before {
56         position: absolute;
57         content: '-';
58         background-color: #ff9000;
59         color: #fff;
60         width: 36rpx;
61         height: 36rpx;
62         border-radius: 50rpx;
63         top: 6rpx;
64         right: 6rpx;
65         z-index: 99;
66     }

 methods里面的功能：

 1 // 上传图片
 2             sendImg: function(){
 3                 let count = 5;  // 自定义一次性最多可选几张
 4                 uni.chooseImage({
 5                     count: count, //默认9
 6                     sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
 7                     sourceType: ['album'], //从相册选择
 8                     success: (res) => {
 9                         const filePaths = res.tempFilePaths;
10                         let selected = this.picArr
11                         for(let i = 0;i<filePaths.length;i++){
12                             this.picArr.unshift(filePaths[i])
13                         }
14                         // console.log(this.picArr)
15                     }
16                 });
17             },
18             // 删除当前图片
19             delpic: function(index){
20                 // console.log(index)
21                 this.picArr.splice(index,1)
22             }

标签：box,flex,center,align,pic,width,评价,uni,上传
来源： https://www.cnblogs.com/zhainverer/p/16330749.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。