微信小程序开发实现三行三列九宫格布局的方法教程

九宫格布局在移动端使用较多，总结一下自己的方法。微信小程序实现三行三列的九宫格

方法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. }