摘要：將數據呈現到界面之后，我們需要相當的樣式來配合，代碼如下。效果如下圖我們模板中使用元素來呈現格子，所以每個格子自然就可以導航了。

作者：如意
來自：授權地址
轉自：微信小程序聯盟?

小程序是長在微信上的，是移動端的界面，為了能夠更方便的使用，我們常常希望使用九宮格界面的方式作為導航，那要如何實現呢？

基于一個簡單的思考，九宮格就是三行三列，如果把行作為一個單位，再將每一行分成三列，那是不是就可以了？我們實踐一下。

首先來考慮九宮格數據的生成，每一個格子需要有一個圖標、一個標題、一個便于跳轉的路由，那天現在我們有九個頁面，所以定義一個一維數組即可。為了更好的進行后續的配置，我們將這個數組獨立到一個文件中routes.js，然后將其在index.js頁面中引用，routes放到index的目錄下。

var PageItems =  
  [  
    {  
      text: "格子1",  
      icon: "../../images/c1.png",  
      route: "../c1/c1",  
    },  
    {  
      text: "格子2",  
      icon: "../../images/c2.png",  
      route: "../c2/c2",  
    },  
     {  
      text: "格子3",  
      icon: "../../images/c3.png",  
      route: "../c3/c3",  
    },  
    {  
      text: "格子4",  
      icon: "../../images/c4.png",  
      route: "../c4/c4",  
    },  
    {  
      text: "格子5",  
      icon: "../../images/c5",  
      route: "../c5/c5",  
    },  
    {  
      text: "格子6",  
      icon: "../../images/c6.png",  
      route: "../c6/c6",  
    },  
    {  
      text: "格子7",  
      icon: "../../images/c7.png",  
      route: "../c7/c7",  
    },  
    {  
      text: "格子8",  
      icon: "../../images/c8",  
      route: "../c8/c8",  
    },  
    {  
      text: "格子9",  
      icon: "../../images/c9.png",  
      route: "../c9/c9",  
    }  
  ];  
module.exports = {  
  PageItems: PageItems  
} 

在index.js頁面中我們引用routes.js，然后得到數據PageItems，但PageItems是一維數組，而我們前面思考是要用一行三列為一個組的，所以需要將這一維數組進行重新組合，最直接的方法就是生成一個數組，每個數組的元素又包含了一個只有三個元素的一維數組，代碼如下?

//index.js  
//獲取應用實例  
var app = getApp()  
var routes = require("routes");  
Page({  
  data: {  
    userInfo: {},  
    cellHeight: "120px",  
    pageItems: []  
  },  
  //事件處理函數  
  onLoad: function () {  
    var that = this  
    console.log(app);  
    //調用應用實例的方法獲取全局數據  
    app.getUserInfo(function (userInfo) {  
      wx.setNavigationBarTitle({  
        title: "全新測試追蹤系統-" + userInfo.nickName,  
        success: function (res) {  
          // success  
        }  
      })  
      that.setData({  
        userInfo: userInfo  
      })  
      var pageItems = [];  
      var row = [];  
      var len = routes.PageItems.length;//重組PageItems  
      len = Math.floor((len + 2) / 3) * 3;  
      for (var i = 0; i < len; i++) {  
        if ((i + 1) % 3 == 0) {  
          row.push(indexs.PageItems[i]);  
          pageItems.push(row);  
          row = [];  
          continue;  
        }  
        else {  
          row.push(indexs.PageItems[i]);  
        }  
      }  
      wx.getSystemInfo({  
        success: function (res) {  
          var windowWidth = res.windowWidth;  
          that.setData({  
            cellHeight: (windowWidth / 3) + "px"  
          })  
        },  
        complete: function () {  
          that.setData({  
            pageItems: pageItems  
          })  
        }  
      })  
    })  
  }  
}) 

在index.wxml中，我們來布局界面，由于每一個格子都是一樣的，只是數據不一樣，所以想到用模板來呈現。為此，我們先做一個單元格的模板面cell.wxml.

這里看到兩個大括號內套的是從外面傳入的數據，然后在里面可以進行簡單的邏輯判斷，以便于更好的呈現。比如text==null的時候，我們希望呈現的是一個空背景的格子，在有數據的時候我們希望呈現一個含背景的格子，所以

"{{text==null||text.length==0?"pages-icon-wrapper-no-bg":"pages-icon-wrapper"}}".

另外一點，由于我們是將該界面文件作為模板的，所以必須要用template標記來包住，同時命一個名字name，這樣在引用模板的地方才可以識別調用。
現在我們在index.wxml中引用這個模板