1-2-3图片的排列

1.展示效果

2.基础方法源码展示

①div部分展示

②css部分展示

3.接口方法源码展示

scoped使用

1.展示效果

2.基础方法源码展示

①div部分展示

   <view class="container">
               <view class="cover">
                   <image class="img" :src="'https://picsum.photos/1850/1800?' + Math.random()" />
               </view>
               <view class="mid">
                   <image class="img" :src="'https://picsum.photos/1850/1800?' + Math.random()" />
                   <image class="img" :src="'https://picsum.photos/1850/1800?' + Math.random()" />
               </view>
               <view class="small">
                   <image class="img" :src="'https://picsum.photos/1230/1000?' + Math.random()" />
                   <image class="img" :src="'https://picsum.photos/1230/1000?' + Math.random()" />
                   <image class="img" :src="'https://picsum.photos/1230/1000?' + Math.random()" />
               </view>
           </view>

②css部分展示

<style scoped> 
.container {position: relative;width: 375px;  /*去掉宽度，设置padding，即可使两边的内边距一样*/height: 812px;background-color: #f5f5f5;padding: 8px;
}.img {width: 100%;height: 100%;background-color: skyblue;display: block;margin: 1px;
}.cover,
.mid,
.small {display: flex;width: 375px;
}.cover {height: 200px;
}.mid {height: 180px;margin: 2px 0;
}.small {height: 100px;
}

3.接口方法源码展示

<template><div class="container"><div class="images"><img v-for="url in urls" :key="url" :src="url" class="img" /></div></div>
</template><script>
export default {data: () => ({urls: ['图片位置'    ]})
}
</script><style scoped>
.container {position: relative;width: 375px;height: 812px;background-color: #f5f5f5;padding: 8px;
}.images {display: flex;flex-wrap: wrap;justify-content: space-between;
}.img {width: 100%;height: 100px;display: block;box-sizing: border-box;padding: 1px;
}.img:nth-child(1) {height: 200px;
}.img:nth-child(2),
.img:nth-child(3) {width: 50%;height: 150px;
}.img:nth-child(4),
.img:nth-child(5),
.img:nth-child(6) {flex: 1;
}
</style>