LiuJun2Son：微信小程序实践教程《三》：仿开眼分类页

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

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

1. 布局的实现

2. 逻辑的实现

3. 样式的实现

1.布局的实现

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

1. <view class="classfiy-view1">
2. <block wx:for="{{imgs}}" wx:for-index="index">
3. <view class="classfiy-view2">
4. <text class="classfiy-text">{{item.title}}</text>
5. <image class="classfiy-image" src="{{item.img}}"></image>
6. </view>
7. </block>
8. </view>

2.逻辑的实现

在页面注册的时候初始化数据，data中准备了一个imgs对象数组，里面存放的是每一个item显示的图片地址和标题

1. Page({
2. data:{
3. imgs:[
4. {
5. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
6. title:"运动1"
7. },
8. {
9. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
10. title:"运动2"
11. },
12. {
13. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
14. title:"运动3"
15. },
16. {
17. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
18. title:"运动4"
19. },
20. {
21. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
22. title:"运动5"
23. },
24. {
25. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
26. title:"运动6"
27. },
28. {
29. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
30. title:"运动7"
31. },
32. {
33. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
34. title:"运动8"
35. },
36. ]
37. }
38. })

3.样式的实现

.classfiy-view1样式：弹性布局，方向为水平，满行自定换行,…

.classfiy-view2样式：弹性布局，规定水平竖直方向居中，view（item）的宽度占一半左右，…

.classfiy-image样式：图片高度

.classfiy-text样式：字体位置为绝对布局，字体的加粗，…

1. .classfiy-view1{
2.  
3. display: flex;
4. flex-direction: row;
5. flex-wrap: wrap;
6.  
7. margin: 5px;
8. }
9.  
10. .classfiy-view2{
11. display: flex;
12. justify-content: center;
13. align-items: center;
14.  
15. width: 48%;
16. margin: 3px;
17. }
18.  
19. .classfiy-image{
20. height: 150px;
21. }
22.  
23. .classfiy-text{
24. position: absolute;
25. font: bold;
26. font-size: 26px;
27. color: white;
28. }

4.效果