微信小程序-仿开眼分类页

这个篇文章带大家一起模仿开眼分类页的布局。
下面将会按照以下的顺序介绍：
布局的实现

逻辑的实现

样式的实现

1.布局的实现
整个布局是通过一个view包裹一个block,每一个block中包含一个item,每一个item都是由一个view包裹一个image图片和text文本组成

 

 

 

 {{item.title}}

 

 

 

 

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.效果

来源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2870