258资源分享网

小程序是长在微信上的，是移动端的界面，为了能够更方便的使用，我们常常希望使用九宫格界面的方式作为导航，那要如何实现呢？基于一个简单的思考，九宫格就是三行三列，如果把行作为一个单 ...

小程序是长在微信上的，是移动端的界面，为了能够更方便的使用，我们常常希望使用九宫格界面的方式作为导航，那要如何实现呢？ 
基于一个简单的思考，九宫格就是三行三列，如果把行作为一个单位，再将每一行分成三列，那是不是就可以了？我们实践一下。 
首先来考虑九宫格数据的生成，每一个格子需要有一个图标、一个标题、一个便于跳转的路由，那天现在我们有九个页面，所以定义一个一维数组即可。为了更好的进行后续的配置，我们将这个数组独立到一个文件中routes.js，然后将其在index.js页面中引用，routes放到index的目录下。 
[javascript]

varPageItems=

[

{

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是一维数组，而我们前面思考是要用一行三列为一个组的，所以需要将这一维数组进行重新组合，最直接的方法就是生成一个数组，每个数组的元素又包含了一个只有三个元素的一维数组，代码如下  [javascript]

//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