uniapp仿照微信朋友圈图片布局

*主要说下一张图布局：

1.上图：不同尺寸的图，以下4张为例

 

 2.上代码

<view class="qz_imgs qz_imgs1 clearfix"  v-if="item.pics.length==1"

v-for="(bean,index) in item.pics" :key="index" >
           <image  :src="osshttp+bean" mode="heightFix"/>
</view>

3.上样式

.qz_imgs{
        position: relative;
        display: flex;
        overflow: hidden;

         &.qz_imgs1{
            image{
               max-height: 320rpx;
                //max-width: 245rpx;//mode="widthFix"
                object-fit: cover;
                border-radius:3px;
                float: left;
                margin: 5px;
            } 
        }

}

*uniapp自带的image样式：

image {

1. display: inline-block;
2. height: 240px;
3. overflow: hidden;
4. width: 320px;

}

 至此，基本能满足常见的一张图横图和竖图样式。

*两张图

<view class="qz_imgs qz_imgs2 clearfix"  >
     <view   v-if="item.pics.length==2"  v-for="(bean,index) in item.pics" :key="index">
            <image  :src="osshttp+bean"  mode="aspectFill"/>
      </view>
  </view>

&.qz_imgs2{
            
       image{
                width:220rpx;
                height:220rpx;
                object-fit: cover;
                border-radius:3px;
                float: left;
                margin: 5px;
      }
  }

*多张图

<view class="qz_imgs qz_imgs3 clearfix"  >
        <view   v-if="item.pics.length>=3"  v-for="(bean,index) in item.pics" :key="index">
                <image  :src="osshttp+bean"  mode="aspectFill"/>
         </view>
         <view class="qz_text">
                   <image :src="osshttp+'/my_img/common/nouser/tup.png'" class="bq-img"></image>
                    {{item.pics.length}}

         </view>
</view>

上样式：

.qz_imgs{
        position: relative;
        display: flex;
        overflow: hidden;
        // justify-content: space-between;
        // flex-wrap: wrap;
        &.qz_imgs3{
            image{
                width:212rpx;
                height:212rpx;
                object-fit: cover;
                border-radius:3px;
                float: left;
                margin: 5px;
            }
        }

        .qz_text{
            position: absolute;
            bottom: 5px;
            right: 1px;
            // font-size: 10px;
            color: #fff;
            background: #0000005e;
            padding: 1px 5px;
            border-radius: 5px;
            .bq-img{
                width:12px!important;
                height: 12px!important;
            }
        }

 }

完事！！！