LiuJun2Son：微信小程序实践教程《二》：仿开眼首页

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

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

1. 布局的实现

2. 逻辑的实现

3. 样式的实现

1.布局的实现

整个布局是通过block包裹一个item布局,每一个item布局又是通过view布局包裹。

最外面的view布局中包含了一张图片和一个内部view，这个内部的view又包含了两个文本。

1. <block wx:for="{{imgs}}" wx:for-index="index">
2. <view >
3. <image class="home-image" src="{{item}}"></image>
4. <view class="home-view2">
5. <text class="home-text-title" >冒险的意义：雪国日本</text>
6. <text class="home-text-title">#运动 / 13'39'</text>
7. </view>
8. </view>
9. </block>

2.逻辑的实现

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

1. Page({
2. data:{
3. img:"https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
4. imgs:[
5. "https://img.kaiyanapp.com/0f793ebcde82e3a16792b4a0ae4f6b9b.jpeg?imageMogr2/quality/60",
6. "https://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
7. "https://img.kaiyanapp.com/521ce39a3689849f13d4e3b35964a1cc.jpeg?imageMogr2/quality/60",
8. "https://img.kaiyanapp.com/2f4b6f09ab9d701da6345cc2641ad8dd.jpeg?imageMogr2/quality/60",
9. ]
10. }
11. })

3.样式的实现

view 样式: 控制每一个item布局的方式：弹性盒子布局，上下布局，水平和竖直居中

.home-view2样式： 控制内部view的位置为绝对布局

.home-image样式： 限制图片的高度。

.home-text-title样式：限制文字的颜色和之间的距离

1. view{
2. display: flex;
3. flex-direction:column;
4. justify-content: center;
5. align-items: center;
6.  
7. }
8.  
9. .home-view2{
10. position: absolute;
11. }
12.  
13. .home-image{
14. height: 170px;
15. }
16.  
17. .home-text-title{
18. color: white;
19. margin-bottom: 10px;
20. }

3.效果