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

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

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

下面是WXML: 

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

最后來看看樣式的設(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. }

今天做的是這個頁面

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

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

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

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