aap仿微信发朋友圈及朋友圈九宫格

html

<view class="w">
　　<view class="bg" v-for="(item,index) in img">
　　　　<image :src="item.src" mode="aspectFill"></image>
　　</view>
</view>

 

scss

.w {
　　　　display: flex;
　　　　align-items: center;
　　　　flex-wrap: wrap;
　　　　width: 100%;
　　.bg {
　　　　flex: 0 0 auto;
　　　　width: calc( ( 100% - 60rpx ) / 3 );
　　　　padding: 10rpx;
　　　　padding-top: 2rpx;
　　　　image {
　　　　width: 100%;
　　　　height: 210rpx;
　　　　}
　　}

}

 

实现效果