AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:03:47

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:LiuJun2Son:微信小程序实践教程《二》:仿开眼首页
相关的资讯,希望对您有帮助。

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

本文为刘军老师实践系列的第二篇:本系列主要是具体的实现;这个篇文章带大家一起模仿开眼首页的布局。下面将会按照以下的顺序介绍:布局的实现逻辑的实现样式的实现1.布局的实现整个布局是通过block包裹一个item布 ...

本文为刘军老师实践系列的第二篇:本系列主要是具体的实现;

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

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

  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>#运动 / 1339text>
  7. view>
  8. view>
  9. block>

2.逻辑的实现

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

  1. Page({
  2. data:{
  3. img:http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  4. imgs:[
  5. http://img.kaiyanapp.com/0f793ebcde82e3a16792b4a0ae4f6b9b.jpeg?imageMogr2/quality/60,
  6. http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  7. http://img.kaiyanapp.com/521ce39a3689849f13d4e3b35964a1cc.jpeg?imageMogr2/quality/60,
  8. http://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. .home-view2{
  8. position: absolute;
  9. }
  10. .home-image{
  11. height: 170px;
  12. }
  13. .home-text-title{
  14. color: white;
  15. margin-bottom: 10px;
  16. }

3.效果


27阅读 | 0评论
你的回应
写文章

7076