前言
刚开始做前端的同学,样式是需要跨过去的第一道坎,而样式中的布局设计更是最常见的需求之一,比如说常见的九宫格或是六宫格,这篇文件就以一个实战案例讲述关于样式布局的相关内容.本文为uniapp项目,不同前端项目的css样式风部分会有差异,大部分都是一致的,重点理解体会布局实现方式以及注意问题.
先看下需要实现的页面:
这是一个六宫格图片布局,其中第一个图是大图,其余均是小图,大小一致,第一行的小图需要上下排列,第二行的小图水平放置.
实现过程
uniapp中基本的视图容器为view,相当于之前接触的div都是块标签.
可以按照图片放置位置划分几个view,整体分为两个大的view.第一个为上面三个,第二个为下面三个.
对应样式如下:
第一行三个又可以分为两部分,左边大的和右边两个小的组成的一部分.
对应样式如下:
最下面一行就是三个图水平放置.
对应样式如下:
页面源码如下:
<template>
<view>
<view class="dynaimic_class">
<view class="dynaimic_item_comnbine_class">
<view class="dynaimic_item_big_class">
<image src="../../static/dynamic/dynamic_1.png"></image>
</view>
<view class="dynaimic_item_big_small_combine_class">
<view class="dynaimic_item_small_class">
<image src="../../static/dynamic/dynamic_2.png"></image>
</view>
<view class="dynaimic_item_small_class">
<image src="../../static/dynamic/dynamic_3.png"></image>
</view>
</view>
</view>
<view class="dynaimic_item_small_combine_class">
<view class="dynaimic_item_small_class">
<image src="../../static/dynamic/dynamic_4.png"></image>
</view>
<view class="dynaimic_item_small_class">
<image src="../../static/dynamic/dynamic_5.png"></image>
</view>
<view class="dynaimic_item_small_class">
<image src="../../static/dynamic/dynamic_6.png"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
.dynaimic_class{
// 父容器
height: 600rpx;
width: 100%;
display: flex; // flex布局并实现换行
flex-wrap: wrap;
box-sizing: border-box; // 设置盒模型以及左右边距10rpx,处理padding-right不生效问题
padding: 10rpx;
.dynaimic_item_comnbine_class{
// 第一行大的view样式
height: calc(100%/3*2);
width: 100%;
display: flex; // flex布局实现水平排列
flex-direction: row;
// margin: 10rpx;
.dynaimic_item_big_class{
// 第一行左侧大图样式
height: 100%;
width: calc(100%/3*2);
image{
height: 100%;
width: 100%;
}
}
.dynaimic_item_big_small_combine_class{
// 第一行右侧两个竖直摆放的小图
height: 100%;
width: calc(100%/3);
display: flex; // flex布局实现数值排列
flex-direction: column;
// margin: 10rpx;
.dynaimic_item_small_class{
// 小图样式
height: 50%;
width: 100%;
image{
height: 100%;
width: 100%;
}
}
}
}
.dynaimic_item_small_combine_class{
//第二行三个小图view样式
height: calc(100%/3);
width: 100%;
display: flex;
justify-content: space-around;
.dynaimic_item_small_class{
// 每个小图样式
height: 100%;
width: calc(100%/3); // 计算每个view大小
image{
height: 100%;
width: 100%;
}
}
}
}
</style>
总结与注意事项
1.容器中实现flex布局并换行使用flex-wrap: wrap;
2.flex布局指定水平或是垂直布局可以使用flex-direction: row;
3.实际实现过程中存在padding-right不生效问题可以使用box-sizing: border-box;进行处理.
4.设置每个view宽度和高度时都是使用百分比,这里指占用父容器的百分数,另外对于百分数存在除不尽的情况进行四舍五入可能会带来显示宽度不一致问题可以使用calc函数进行相关运算.
5.image图片完全在view中显示的处理方式是设置image的宽高占用view的100%,uniapp中image中默认为320px*240px.不指定会出现image超过view布局的情形.
以上是实现宫格样式布局处理的全过程,如果感觉有所帮助或是有其他好的实现方式欢迎点赞或是评论区留言!