九宮格布局在移動端使用較多，總結一下自己的方法。微信小程序實現三行三列的九宮格

方法1：使用百分比

        一個父容器設置寬度為100%，父容器中包含九個小格子，寬度為父容器的33.3%（此處需要自己調試），然后使其橫向排列，三格結束自動擠到下一行排列。

方法二：使用wx：for創建一個三行三列的九宮格。此處就是js中的雙層for循環原理，在小程序中顯示兩個對象的嵌套。第一次循環第一個對象（obj），第二次循環第一個對象中的另外一個對象（obj.items），彈性盒子布局。

1. obj:[ 
2.  
3.   { 
4.  
5.     id:0, 
6.  
7.     items:[ 
8.  
9.       { id: 0, src: '../../img/12.jpg', text: '代辦理賠' }, 
10.  
11.       { id: 1, src: '../../img/12.jpg', text: '拖車' }, 
12.  
13.       { id: 2, src: '../../img/12.jpg', text: '緊急救援' }, 
14.  
15.     ], 
16.  
17.   },{ 
18.  
19.     id:1, 
20.  
21.     items:[ 
22.  
23.       { id: 3, src: '../../img/12.jpg', text: '事故車定損' }, 
24.  
25.       {id: 4, src: '../../img/12.jpg', text: '保險代理' }, 
26.  
27.       {id: 5, src: '../../img/12.jpg', text: '查勘定損' } 
28.  
29.     ] 
30.  
31.   },{ 
32.  
33.     id: 3, 
34.  
35.     items1: [ 
36.  
37.       { id: 6, src: '../../img/12.jpg', text: '數據統計' }, 
38.  
39.       { id: 7, src: '../../img/12.jpg', text: '修改密碼' }, 
40.  
41.       { id: 8, src: '../../img/12.jpg', text: '退出登錄' } 
42.  
43.     ] 
44.  
45.   } 
46.  
47. ], 

具體實現如下：

wxml代碼實現簡單樣式搭建：

1. <view class="page-zong"  wx:for="{{obj}}" wx:key="{{id}}"> 
2.  
3.   <block wx:for="{{item.items}}" wx:key="{{id}}" wx:for-item="items" > 
4.  
5.     <view class="page-section" bindtap="bind" data-name="{{items.text}}"> 
6.  
7.            <view class="img"> 
8.  
9.               <image src="{{items.src}}" title="{{items.src}}" alt="{{items.src}}"></image> 
10.  
11.           </view> 
12.  
13.           <view class="pages-text-zong"> 
14.  
15.               <text class="pages-text">{{items.text}}</text> 
16.  
17.           </view> 
18.  
19.     </view> 
20.  
21.   </block> 
22.  
23. </view> 

js數據的填充：

1. obj:[ 
2.  
3.   { 
4.  
5.     id:0, 
6.  
7.     items:[ 
8.  
9.       { id: 0, src: '../../img/12.jpg', text: '代辦理賠' }, 
10.  
11.       { id: 1, src: '../../img/12.jpg', text: '拖車' }, 
12.  
13.       { id: 2, src: '../../img/12.jpg', text: '緊急救援' }, 
14.  
15.     ], 
16.  
17.   },{ 
18.  
19.     id:1, 
20.  
21.     items:[ 
22.  
23.       { id: 3, src: '../../img/12.jpg', text: '事故車定損' }, 
24.  
25.       {id: 4, src: '../../img/12.jpg', text: '保險代理' }, 
26.  
27.       {id: 5, src: '../../img/12.jpg', text: '查勘定損' } 
28.  
29.     ] 
30.  
31.   },{ 
32.  
33.     id: 3, 
34.  
35.     items: [ 
36.  
37.       { id: 6, src: '../../img/12.jpg', text: '數據統計' }, 
38.  
39.       { id: 7, src: '../../img/12.jpg', text: '修改密碼' }, 
40.  
41.       { id: 8, src: '../../img/12.jpg', text: '退出登錄' } 
42.  
43.     ] 
44.  
45.   } 
46.  
47. ] 

wxss的渲染：使用rem和%使其不同屏幕的更合自適應。
 

1. .page-zong{ 
2.  
3.   width: 102%;（有凹陷的感覺，需調試合適尺寸） 
4.  
5.   display: flex; 
6.  
7.   flex-direction: row; 
8.  
9.   justify-content: space-around; 
10.  
11.   margin-left: -1%; 
12.  
13. } 
14.  
15. .page-section{ 
16.  
17.   flex: 1; 
18.  
19.   border: 0.1rem solid lightgray; 
20.  
21.   padding: 1rem 0.5rem; 
22.  
23.   text-align: center; 
24.  
25. } 
26.  
27. .pages-text{ 
28.  
29.   font-size: 0.8rem; 
30.  
31.   display: inline-block; 
32.  
33.   margin: 0.6rem auto 0rem auto; 
34.  
35.   font-weight: 600; 
36.  
37. } 
38.  
39. image{ 
40.  
41.   width: 50%; 
42.  
43.   height: 3rem; 
44.  
45. }