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

思路：整個頁面分為頭部和內容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;這個屬性，讓頂部控件始終展示在最前面。