微信小程序-仿开眼首页

本文主要是介绍微信小程序-仿开眼首页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

1. 布局的实现

2. 逻辑的实现

3. 样式的实现

1.布局的实现

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

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

<block wx:for="{{imgs}}" wx:for-index="index"><view ><image class="home-image" src="{{item}}"></image><view class="home-view2"><text class="home-text-title" >冒险的意义：雪国日本</text><text class="home-text-title">#运动 / 13'39'</text></view></view></block>

2.逻辑的实现

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

    Page({data:{img:"http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",imgs:["http://img.kaiyanapp.com/0f793ebcde82e3a16792b4a0ae4f6b9b.jpeg?imageMogr2/quality/60","http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60","http://img.kaiyanapp.com/521ce39a3689849f13d4e3b35964a1cc.jpeg?imageMogr2/quality/60","http://img.kaiyanapp.com/2f4b6f09ab9d701da6345cc2641ad8dd.jpeg?imageMogr2/quality/60",]}})

3.样式的实现

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

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

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

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

    view{display: flex;flex-direction:column;justify-content: center;align-items: center;}.home-view2{position: absolute;}.home-image{height: 170px;}.home-text-title{color: white;margin-bottom: 10px;}

3.效果

这篇关于微信小程序-仿开眼首页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---