微信小程序布局 左右结构简单例子

左右结构 左边是商品分类 右边是小分类 或者是 商品列表 很常见

效果图

 

wxml

<!--index.wxml-->
<view class="container">
  <view class="nav_left">
    <view class="item">分类一</view>
    <view class="item">分类二</view>
    <view class="item">分类三</view>
  </view>
  <view class="content">
    <view class="item">商品一</view>
    <view class="item">商品二</view>
    <view class="item">商品三</view>
    <view class="item">商品四</view>
    <view class="item">商品五</view>
  </view>
</view>

wxss

.container {
  display: flex;
  width: 100%;  
  height: 100%;  
  background-color: #fff;  
  color: #939393;  
}

.nav_left{  
  width: 30%; 
  height: 100%;  
  background: #f5f5f5;  
  text-align: center;  
}  

.nav_left .item{  
  height: 40px;  
  line-height: 40px;  
  padding: 6px 0;  
  border-bottom: 1px solid #dedede;  
  font-size: 14px; 
}

.content{
  display: flex;
  flex-wrap:wrap;
  background-color: #dedede;
  width:70%;
  height: 800rpx;
  border: 1px red solid;
  justify-content:flex-start;
  align-content: flex-start;
}

.content .item{
  box-sizing:border-box;
  width: 33.3%;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  border: 1px #ccc solid;
  
}