我根据微信小程序的特点弄了一套简单的栅格布局。
.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
})
}
}
})
别忘了把栅格布局的代码放到app.wxss里面哦。
干活系列项目地址:
码云:https://gitee.com/mrxu314/xcx_gh
gitHub:https://github.com/mrxu0/xcx_gh
希望这篇文章能够帮助到你们
欢迎大家关注我的公众号吵吵日记: