小程序开发系列(二)九宫格

小程序是长在微信上的，是移动端的界面，为了能够更方便的使用，我们常常希望使用九宫格界面的方式作为导航，那要如何实现呢？

基于一个简单的思考，九宫格就是三行三列，如果把行作为一个单位，再将每一行分成三列，那是不是就可以了？我们实践一下。

首先来考虑九宫格数据的生成，每一个格子需要有一个图标、一个标题、一个便于跳转的路由，那天现在我们有九个页面，所以定义一个一维数组即可。为了更好的进行后续的配置，我们将这个数组独立到一个文件中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',
    },
    {