这个篇文章带大家一起模仿开眼分类页的布局。
下面将会按照以下的顺序介绍：
布局的实现
逻辑的实现
样式的实现
1.布局的实现
整个布局是通过一个view包裹一个block,每一个block中包含一个item,每一个item都是由一个view包裹一个image图片和text文本组成
<view class="classfiy-view1">
<block wx:for="{{imgs}}" wx:for-index="index">
<view class="classfiy-view2">
<text class="classfiy-text">{{item.title}}</text>
<image class="classfiy-image" src="{{item.img}}"></image>
</view>
</block>
</view>
2.逻辑的实现
在页面注册的时候初始化数据，data中准备了一个imgs对象数组，里面存放的是每一个item显示的图片地址和标题
Page({
data:{
imgs:[
{
img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
title:"运动1"
},
{
img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
title:"运动2"
},
{
img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
title:"运动3"
},
{
img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
title:"运动4"
},
{
img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
title:"运动5"
},
{
img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
title:"运动6"
},
{
img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
title:"运动7"
},
{
img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
title:"运动8"
},
]
}
})
3.样式的实现
.classfiy-view1样式：弹性布局，方向为水平，满行自定换行,…
.classfiy-view2样式：弹性布局，规定水平竖直方向居中，view（item）的宽度占一半左右，…
.classfiy-image样式：图片高度
.classfiy-text样式：字体位置为绝对布局，字体的加粗，…
.classfiy-view1{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 5px;
}
.classfiy-view2{
display: flex;
justify-content: center;
align-items: center;
width: 48%;
margin: 3px;
}
.classfiy-image{
height: 150px;
}
.classfiy-text{
position: absolute;
font: bold;
font-size: 26px;
color: white;
}
4.效果
