微信小程序之九宫格

1. <!--index.wxml-->  
2. <view class="container">  
3.   <view class="weui-grids">  
4.     <view class="weui-grid" wx:for="{{routers}}" wx:key="name">  
5.       <navigator url="{{item.url}}">  
6.         <view class="weui-grid__icon">  
7.           <image src=" {{item.icon}}" mode="scaleToFill" />  
8.         </view>  
9.         <text class="weui-grid__label">{{item.name}}</text>  
10.       </navigator>  
11.     </view>  
12.   </view>  
13. </view>  

界面代码中使用for循环的方式来展开，然后使用view来包裹，再将要包裹的内容放到内部，因为九宫格常常用作首页的功能块索引，所以内部增加了navigator的导航索引来实现。对于for循环中的数据直接在index.js中的data加入一个数组即可，代码如下。

[javascript]  view plain  copy

1. //index.js  
2. //获取应用实例  
3. var app = getApp()  
4. Page({  
5.   data: {  
6.     routers: [  
7.       {  
8.         name: 'T1',  
9.         url: '',  
10.         icon: ''  
11.       },  
12.       {  
13.         name: 'T2',  
14.         url: '',  
15.         icon: ''  
16.       },  
17.       {  
18.         name: 'T3',  
19.         url: '',  
20.         icon: ''  
21.       },  
22.        {  
23.         name: 'T4',  
24.         url:'',  
25.         icon:''   
26.       },  
27.        {  
28.         name: 'T5',  
29.         url:'',  
30.         icon:''   
31.       },  
32.        {  
33.         name: 'T6',  
34.         url:'',  
35.         icon:''   
36.       },  
37.        {  
38.         name: 'T7',  
39.         url:'',  
40.         icon:''   
41.       },  
42.        {  
43.         name: 'T8',  
44.         url:'',  
45.         icon:''   
46.       },  
47.        {  
48.         name: 'T9',  
49.         url:'',  
50.         icon:''   
51.       }  
52.     ]  
53.   },  
54.   onLoad: function () {  
55.     console.log('onLoad')  
56.     var that = this  
57.   }  
58. })  

下面是控制布局的样式代码

[css]  view plain  copy

1. /**index.wxss**/  
2. .weui-grids {  
3.   position: relative;  
4.   overflow: hidden;  
5. }  
6. .weui-grids:before {  
7.   content: " ";  
8.   position: absolute;  
9.   left: 0;  
10.   top: 0;  
11.   right: 0;  
12.   height: 1px;  
13.   border-top: 1px solid #D9D9D9;  
14.   color: #D9D9D9;  
15.   -webkit-transform-origin: 0 0;  
16.           transform-origin: 0 0;  
17.   -webkit-transform: scaleY(0.5);  
18.           transform: scaleY(0.5);  
19. }  
20. .weui-grids:after {  
21.   content: " ";  
22.   position: absolute;  
23.   left: 0;  
24.   top: 0;  
25.   width: 1px;  
26.   bottom: 0;  
27.   border-left: 1px solid #D9D9D9;  
28.   color: #D9D9D9;  
29.   -webkit-transform-origin: 0 0;  
30.           transform-origin: 0 0;  
31.   -webkit-transform: scaleX(0.5);  
32.           transform: scaleX(0.5);  
33. }  
34. .weui-grid {  
35.   position: relative;  
36.   float: left;  
37.   padding: 20px 10px;  
38.   width: 33.33333333%;  
39.   box-sizing: border-box;  
40. }  
41. .weui-grid:before {  
42.   content: " ";  
43.   position: absolute;  
44.   right: 0;  
45.   top: 0;  
46.   width: 1px;  
47.   bottom: 0;  
48.   border-right: 1px solid #D9D9D9;  
49.   color: #D9D9D9;  
50.   -webkit-transform-origin: 100% 0;  
51.           transform-origin: 100% 0;  
52.   -webkit-transform: scaleX(0.5);  
53.           transform: scaleX(0.5);  
54. }  
55. .weui-grid:after {  
56.   content: " ";  
57.   position: absolute;  
58.   left: 0;  
59.   bottom: 0;  
60.   right: 0;  
61.   height: 1px;  
62.   border-bottom: 1px solid #D9D9D9;  
63.   color: #D9D9D9;  
64.   -webkit-transform-origin: 0 100%;  
65.           transform-origin: 0 100%;  
66.   -webkit-transform: scaleY(0.5);  
67.           transform: scaleY(0.5);  
68. }  
69. .weui-grid:active {  
70.   background-color: #ECECEC;  
71. }  
72. .weui-grid__icon {  
73.   width: 32px;  
74.   height: 32px;  
75.   margin: 0 auto;  
76. }  
77. .weui-grid__icon image {  
78.   display: block;  
79.   width: 100%;  
80.   height: 100%;  
81. }  
82. .weui-grid__icon + .weui-grid__label {  
83.   margin-top: 5px;  
84. }  
85. .weui-grid__label {  
86.   display: block;  
87.   text-align: center;  
88.   font-weight: bold;  
89.   color: #000000;  
90.   font-size: 14px;  
91.   white-space: nowrap;  
92.   text-overflow: ellipsis;  
93.   overflow: hidden;  
94. }  

核心是weui-grid的width:33.33333%，这样就确保了一行只能排3块。上面的样式代码使用的是微信的weui的九宫格样式。

效果图