微信小程序中的常用布局方式（总结）
微信小程序中的常用布局方式（总结）
参照Android开发，总结了微信小程序的常用的两种布局方式：1、线性布局（横版、竖版）。2、网格布局。
效果图如下：
一、网格布局
（1）固定Item个数的网格布局，主要用于功能模块入口展示。
WXML：
<!-- 网格布局（固定个数） -->
<view class="container_h wrap">
<view class="block" style="background-color: green;"></view>
<view class="block" style="background-color: red;"></view>
<view class="block" style="background-color: blue;"></view>
<view class="block" style="background-color: orange;"></view>
<view class="block" style="background-color: yellow;"></view>
<view class="block" style="background-color: gray;"></view>
<view class="block" style="background-color: lightblue;"></view>
<view class="block" style="background-color: rgb(247, 6, 206);"></view>
</view>
WXSS：
.container_h {
display: flex;
flex-direction: row;
}
.wrap {
flex-wrap: wrap;
}
.block {
width: 25%;
height: 200rpx;
}
（2）随机Item个数的网格布局，主要用于产品多列效果展示。
WXML：
<!-- 网格布局（随机个数） -->
<scroll-view class="container_g_list m_t_50" scroll-x="true">
<block wx:for="{{itemList}}" wx:key="name">
<view class="h_list_item">
<view class="container_v align_center p_10">
<image src="{{item.image}}" style="width: 100%; height: 150rpx;"></image>
<text style="font-size: 30rpx;">{{item.name}}</text>
</view>
</view>
</block>
</scroll-view>
WXSS：
.container_g_list{
white-space: wrap;/*不放这个不能横排*/
}
.container_g_list .h_list_item{
width: 50%;
height: 270rpx;
display: inline-block;/*不放这个不能横排*/
}
.p_10 {
padding: 10rpx;
}
.container_v {
display: flex;
flex-direction: column;
}
.align_center {
align-items: center;
}
二、线性布局
（1）竖版列表效果，用于产品列表展示。（默认）
WXML：
<!-- 线性布局（竖向，随机个数） -->
<view class="container_v">
<block wx:for="{{itemList}}" wx:key="name">
<view class="container_v align_center">
<image src="{{item.image}}" style="width: 180rpx; height: 150rpx;"></image>
<text style="font-size: 30rpx;">{{item.name}}</text>
</view>
</block>
</view>
WXSS：
.container_v {
display: flex;
flex-direction: column;
}
.align_center {
align-items: center;
}
（2）横版列表布局，用户产品列表展示。
WXML：
<!-- 线性布局（横向，随机个数） -->
<scroll-view class="container_h_list m_t_50" scroll-x="true">
<block wx:for="{{itemList}}" wx:key="name">
<view class="h_list_item">
<view class="container_v align_center">
<image src="{{item.image}}" style="width: 180rpx; height: 150rpx;"></image>
<text style="font-size: 30rpx;">{{item.name}}</text>
</view>
</view>
</block>
</scroll-view>
WXSS：
.container_h_list{
padding: 0 10rpx;
border-radius: 20rpx;
white-space: nowrap;/*不放这个不能横排*/
}
.container_h_list .h_list_item{
width: 200rpx;
height: 270rpx;
display: inline-block;/*不放这个不能横排*/
}
.container_v {
display: flex;
flex-direction: column;
}
.align_center {
align-items: center;
}