微信小程序开发实战教程 ：绘制的页面

微信开发者工具的使用我们就不一一赘述了，下面直接看需要绘制的页面。

思路：整个页面分为头部和内容2大模块，头部又可以分为左右2个部分，将右边的部分设置成行内样式就能让图片和文字显示在一行，右边的位置可以通过相对定位进行微调。

内容部分基本上没一个模块（cell）都是一样的，可以使用for循环创建。样式的设置思路和头部的思路基本一致。

下面是WXML:

WXML中的userInfo和titleArr，imageArr,是js中已经绑定好的数据，下面是js中的demo

最后来看看样式的设置部分

1. /*头部信息*/
2.  
3. .lineView{
4.  
5. background-color: lightgrey;
6.  
7. width: 100%;
8.  
9. height: 20rpx;
10.  
11. }
12.  
13. .header,.my-cell{
14.  
15. position: relative;
16.  
17. }
18.  
19. .header-right,.my-cell-right{
20.  
21. display: inline-block;
22.  
23. overflow: hidden;
24.  
25. margin-left: 20rpx;
26.  
27. line-height: 40rpx;
28.  
29. font-size: 30rpx;
30.  
31. position: absolute;
32.  
33. top: 50rpx;
34.  
35. }
36.  
37. .header image{
38.  
39. width: 120rpx;
40.  
41. height: 120rpx;
42.  
43. background-size: cover;
44.  
45. border-radius: 60rpx;
46.  
47. margin-top: 30rpx;
48.  
49. margin-bottom: 30rpx;
50.  
51. margin-left: 30rpx;
52.  
53. }
54.  
55. /*内容*/
56.  
57. .my-cell-right{
58.  
59. top: 44rpx;
60.  
61. }
62.  
63. .my-cell image{
64.  
65. width: 40rpx;
66.  
67. height: 40rpx;
68.  
69. margin: 40rpx 40rpx;
70.  
71. }
72.  
73. .my-cell-line{
74.  
75. background-color: lightgrey;
76.  
77. width: 700rpx;
78.  
79. height: 2rpx;
80.  
81. margin-top: 40rpx;
82.  
83. }

今天做的是这个页面

先说一下顶部的注意点：顶部的导航栏的创建

分别给热门笑话和经典笑话绑定不同的事件，通过点击改变js中声明的currentSelectedNavBar
变量，再通过这个变量的值改变去改变控件的class属性，从而可以重新设置他们的样式。下面是设置样式部分

注意点：顶部是固定不动的，所以要用到position: fixed;属性，在测试的过程中发现scrollView滚动到一定的位置后顶部的控件会变成透明，原因是顶部控件没有设置具体的高度，所以height: 40px;这个属性不能省略，还有一个现象就是scrollView会盖住顶部的控件，所以设置了z-index: 9999;这个属性，让顶部控件始终展示在最前面。