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

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

1. 布局的实现
2. 逻辑的实现
3. 样式的实现
4. 效果

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

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"                },            ]        }    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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;    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

4.效果