apicloud apicloud

注册
查看: 4841|回复: 11

[APP开发技巧] 微信附近的人页面(一)页面布局

新手上路

UID:123710

主题:
7
帖子:
41
云币:
337

[APP开发技巧] 微信附近的人页面(一)页面布局

4841 11 | 发表于 2015-8-14 12:54:01 |阅读模式 | |
本帖最后由 nfer 于 2015-8-14 12:54 编辑

今天我们来看一下如何实现微信附近的人页面,今天是第一部分,先谈该页面的布局和UI实现。
惯例,先上图:


主页面布局
主页面包括两部分,header和content部分,其中header部分的高度固定,content部分占据剩余的全部区域。因此使用盒状模型的css代码如下:
  1.     body{
  2.         display: -webkit-box;
  3.         display: -webkit-flex;
  4.         display: flex;
  5.         -webkit-box-orient: vertical;
  6.         -webkit-flex-direction: column;
  7.         flex-direction: column;
  8.     }
  9.         .content {
  10.         -webkit-box-flex: 1;
  11.         -webkit-flex: 1;
  12.         flex: 1;
  13.     }
复制代码

header部分包括左侧返回按钮、中间的标题一级右边的筛选按钮,同样使用盒状模型:
  1.     .header {
  2.         display: -webkit-box;
  3.         display: -webkit-flex;
  4.         display: flex;
  5.     }
  6.         .title {
  7.         -webkit-box-flex: 1;
  8.         -webkit-flex: 1;
  9.         flex: 1;
  10.     }
复制代码
注意,header部分和主体部分虽然都是盒状模型,但是一个是垂直布局,一个是水平布局(即默认布局方向)。

content部分就是一行一行的内容显示,布局结构比较简单:
  1.     .item {
  2.                 position: relative;
  3.         }
复制代码

content页面布局
content页面是一行行的数据内容显示,所以主体结构是:
  1.         .item {
  2.             position: relative;
  3.             background-color: #fff;
  4.         }
复制代码

每行包括一个图像和一些用户信息,其中图像固定在左侧,用户信息占据剩余的全部空间,同样是盒装模型:
  1.         .wrap {
  2.             display: -webkit-box;
  3.             display: -webkit-flex;
  4.             display: flex;
  5.         }
  6.         .content {
  7.             -webkit-box-flex: 1;
  8.             -webkit-flex: 1;
  9.             flex: 1;
  10.             height: 78px;
  11.             padding: 10px;
  12.         }
复制代码

在这里使用大量的绝对数值来表示高度、宽度以及padding等等。其中左侧的头像css代码如下:
  1.         .pic {
  2.             width: 66px;
  3.             height: 66px;
  4.             margin: 6px 10px 6px 0;
  5.             border-radius: 15px;
  6.         }
复制代码

用户信息部分,包括两行,一行是昵称以及性别标识,一行是签名档,同样用了很多绝对数字:
  1.         .userinfo {
  2.             margin-top: 10px;
  3.         }
  4.         .userinfo .username {
  5.             color: #333;
  6.             font-size: 17px;
  7.             vertical-align: middle;
  8.         }
  9.         .userinfo .seximg {
  10.             width: 16px;
  11.             height: 16px;
  12.             margin-left: 3px;
  13.             vertical-align: middle;
  14.         }
  15.         .userdesc {
  16.             color: #666;
  17.             font-size: 14px;
  18.             margin-top: 10px;
  19.         }
复制代码

最后看一下,每行内容的具体div元素:
  1.     <div href="" class="item female" tapmode onclick="alert(123);">
  2.         <div class="wrap">
  3.             <img class="pic" src="../image/head1.jpg">
  4.             <div class="content">
  5.                 <div class="userinfo">
  6.                     <span class="username">无心</span>
  7.                     <img class="seximg" src="../image/female.png" alt="">
  8.                 </div>
  9.                 <div class="userdesc">居安思危</div>
  10.             </div>
  11.         </div>
  12.     </div>
复制代码

下面是用到的两个页面以及所有图片,具体源码请自行学习。


下一章节预告:
微信附近的人页面(二)如果筛选所有的女生或男生

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

主题:
56
帖子:
298
云币:
1159
发表于 2015-8-14 13:08:33 |
好! 盒装模型 还是懂非懂

新手上路

UID:123710

主题:
7
帖子:
41
云币:
337
 楼主| 发表于 2015-8-14 13:48:46 |
清风师爷 发表于 2015-8-14 13:08
好! 盒装模型 还是懂非懂

自己多用用,多写写就懂了。
原理很复杂,使用很简单。

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-8-14 15:02:47 |
感谢分享,赞一个

主题:
21
帖子:
514
云币:
578

APICloud粉丝APICloud毕业勋章一周年圣诞节托马斯全旋女朋友

发表于 2015-8-14 15:10:28 |
赞一个!

主题:
0
帖子:
6
云币:
23
发表于 2015-9-12 11:44:00 |
有没有可视化的工具啊

主题:
56
帖子:
298
云币:
1159
发表于 2015-9-24 17:12:58 |
楼主快出下集。

驾校小白

UID:166352

主题:
0
帖子:
15
云币:
23
发表于 2015-9-26 15:48:15 |
谢谢分享

主题:
4
帖子:
17
云币:
75
发表于 2016-3-23 10:34:54 |
楼主不见了咩

驾校小白

UID:280762

主题:
0
帖子:
28
云币:
86
发表于 2016-3-23 11:34:29 |
流布局非常好
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表