微信開(kāi)發(fā)者工具的使用我們就不一一贅述了，下面直接看需要繪制的頁(yè)面。 

思路：整個(gè)頁(yè)面分為頭部和內(nèi)容2大模塊，頭部又可以分為左右2個(gè)部分，將右邊的部分設(shè)置成行內(nèi)樣式就能讓圖片和文字顯示在一行，右邊的位置可以通過(guò)相對(duì)定位進(jìn)行微調(diào)。

內(nèi)容部分基本上沒(méi)一個(gè)模塊（cell）都是一樣的，可以使用for循環(huán)創(chuàng)建。樣式的設(shè)置思路和頭部的思路基本一致。

下面是WXML: 

WXML中的userInfo和titleArr，imageArr,是js中已經(jīng)綁定好的數(shù)據(jù)，下面是js中的demo

最后來(lái)看看樣式的設(shè)置部分

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. /*內(nèi)容*/
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. }

今天做的是這個(gè)頁(yè)面

先說(shuō)一下頂部的注意點(diǎn)：頂部的導(dǎo)航欄的創(chuàng)建 

分別給熱門(mén)笑話和經(jīng)典笑話綁定不同的事件，通過(guò)點(diǎn)擊改變js中聲明的currentSelectedNavBar  變量，再通過(guò)這個(gè)變量的值改變?nèi)ジ淖兛丶腸lass屬性，從而可以重新設(shè)置他們的樣式。下面是設(shè)置樣式部分 

注意點(diǎn)：頂部是固定不動(dòng)的，所以要用到position: fixed;屬性，在測(cè)試的過(guò)程中發(fā)現(xiàn)scrollView滾動(dòng)到一定的位置后頂部的控件會(huì)變成透明，原因是頂部控件沒(méi)有設(shè)置具體的高度，所以height: 40px;這個(gè)屬性不能省略，還有一個(gè)現(xiàn)象就是scrollView會(huì)蓋住頂部的控件，所以設(shè)置了z-index: 9999;這個(gè)屬性，讓頂部控件始終展示在最前面。

cell的樣式都是很基本的思路，還有網(wǎng)絡(luò)請(qǐng)求部分的demo具體請(qǐng)看源碼，  源碼地址：http://git.oschina.net/darrenchen/xiaochengxu_leilema  源碼下載：darrenchen-xiaochengxu_leilema-master.zip