微信小程序中的常用布局方式（总结）

参照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;

}