左右结构 左边是商品分类 右边是小分类 或者是 商品列表 很常见
效果图
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; }
