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

这个篇文章带大家一起模仿开眼分类页的布局。

下面将会按照以下的顺序介绍：

1. 布局的实现

2. 逻辑的实现

3. 样式的实现

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