HTML实现微信9宫格,微信小程序 九宫格实例代码

实例代码"/>

HTML实现微信9宫格,微信小程序 九宫格实例代码

微信小程序 九宫格

实现效果图：

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

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

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