小程序开发九宫格界面的导航的代码实现

小程序开发九宫格界面的导航的代码实现
本篇文章主要介绍了小程序开发实战：实现九宫格界面的导航的代码实现，具有一定的参考价值，有兴趣的可以了解一下。

本篇文章主要介绍了小程序开发实战：实现九宫格界面的导航的代码实现，具有一定的参考价值，有兴趣的可以了解一下。

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

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

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