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

admin

admin

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

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

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

本文为刘军老师实践第三篇,已得到授权;这个篇文章带大家一起模仿开眼分类页的布局。下面将会按照以下的顺序介绍:布局的实现逻辑的实现样式的实现1.布局的实现整个布局是通过一个view包裹一个block,每一个block中 ...

本文为刘军老师实践第三篇,已得到授权;

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

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

  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:http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  6. title:运动1
  7. },
  8. {
  9. img:http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  10. title:运动2
  11. },
  12. {
  13. img:http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  14. title:运动3
  15. },
  16. {
  17. img:http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  18. title:运动4
  19. },
  20. {
  21. img:http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  22. title:运动5
  23. },
  24. {
  25. img:http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  26. title:运动6
  27. },
  28. {
  29. img:http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60,
  30. title:运动7
  31. },
  32. {
  33. img:http://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. display: flex;
  3. flex-direction: row;
  4. flex-wrap: wrap;
  5. margin: 5px;
  6. }
  7. .classfiy-view2{
  8. display: flex;
  9. justify-content: center;
  10. align-items: center;
  11. width: 48%;
  12. margin: 3px;
  13. }
  14. .classfiy-image{
  15. height: 150px;
  16. }
  17. .classfiy-text{
  18. position: absolute;
  19. font: bold;
  20. font-size: 26px;
  21. color: white;
  22. }

4.效果


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

6945