微信小程序第三天（布局：栅格布局）

article/2025/9/28 2:34:31

我根据微信小程序的特点弄了一套简单的栅格布局。

.row {display: block;margin: 0px;
}.col {display: flex;font-family: -apple-system-font, "Helvetica Neue", sans-serif;font-size: 17px;
}.col>.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
.col-10, .col-11, .col-12 {overflow: hidden;
}.col-1 {width: 8.33333333333333%;
}.col-2 {width: 16.6666666666666%;
}.col-3 {width: 25%;
}.col-4 {width: 33.3333333333333%;
}.col-5 {width: 41.6666666666666%;
}.col-6 {width: 50%;
}.col-7 {width: 58.333333333333333%;
}.col-8 {width: 66.66666666666666%;
}.col-9 {width: 75%;
}.col-10 {width: 83.33333333333333%;
}.col-11 {width: 91.66666666666666%;
}.col-12 {width: 100%;
}.x-center {text-align: center;
}

这是CSS代码，学起来很简单，就是必须要保证格式如：

<view class="row"><view class="col"><view class="col-3"></view><view class="col-9"></view></view>
</view>

这是一行俩列的一个布局。
这里写图片描述

上面的图片是京东的一个分类的布局，我用我的布局给你们实现以下(只是布局的实现，并不是全部)

WXML

<view class="row"><view class="col"><!--分栏--><view class="col-3" style="background:white;height:100%;"><block wx:for="{{classifyData}}"><view class="row border_padding {{item.toggle ? 'background_corlor' : ''}}"><view class="col x-center" bindtap="backgroundClick" data-index="{{index}}" data-toggle="{{item.toggle}}">{{item.name}}</view></view></block></view><!--各类推荐--><view class="col-9" style="background:#F8F8F8;padding:0px 0px 0px 7px"><block wx:for="{{brandData}}"><view class="row"><view class="col" style="color:red;">{{item.name}}</view></view><view class="row x-center"><view class="col"><view class="col-12"><block class="" wx:for="{{item.item}}"><view class="flex-item" style="background:white;"><text>{{item.name}}</text></view></block></view></view></view></block></view></view>
</view>

wxss

/* pages/mySelf/name/name.wxss *//*分栏*/
.fen_margin_red_{margin:10px 4px 10px 4px;
}
.border_padding{border-bottom:1px solid #F8F8F8;padding:10px 5px 10px 4px;
}
.background_corlor{color:red;background: #F8F8F8;
}/*各类推荐*/
.flex-item{width: 175rpx;height: 160rpx;border:3rpx solid #F8F8F8;margin-right:-1px;margin-bottom:-1px;float: left;background: white;display: block;
}

JS

Page({data: {classifyData: [{ name: '品牌男装' },{ name: '潮流女装' },{ name: '家用电器' },{ name: '鞋靴箱包' },{ name: '厨房用品' },{ name: '家居建材' },{ name: '手机数码' }],brandData: [{name: '品牌推荐',item: [{ name: '美的' },{ name: '海尔' },{ name: '格力' },{ name: '飞利浦' },{ name: '华帝' },{ name: '海信' },{ name: '九阳' },{ name: '三洋' },{ name: '三星' },]},{name: '电视',item: [{ name: '合资品牌' },{ name: '国产品牌' },{ name: '互联网品牌' }]},{name: '空调',item: [{ name: '悬挂式空调' },{ name: '柜式空调' },{ name: '空调配件' },{ name: '中央空调' }]}]},onLoad: function (options) {console.log(options.name);},//单击改变分栏的显示状态backgroundClick: function (e) {console.log('backgroundClick', e)console.log('toggle', e.target.dataset.toggle)if (e.target.dataset.toggle == undefined) {this.data.classifyData[e.target.dataset.index].toggle = true;for (var i = 0; i < this.data.classifyData.length; i++) {if (i != e.target.dataset.index) {this.data.classifyData[i].toggle = undefined;}}this.setData({classifyData: this.data.classifyData})}}
})