微信小程序九宫格布局开发代码

　　微信小程序是移动端的界面，界面以九宫格的方式出现可以让用户的使用更加便捷，但是微信小程序九宫格布局也需要代码，下面就是具体的开发小程序源代码了。

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

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

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

　　这里看到两个大括号内套的是从外面传入的小程序数据，然后在里面可以进行简单的逻辑判断，以便于更好的呈现。比如text==null的时候，我们希望呈现的是一个空背景的格子，在有数据的时候我们希望呈现一个含背景的格子，所以"{{text==null||text.length==0?'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".

　　另外一点，由于我们是将该界面文件作为小程序模板的，所以必须要用template标记来包住，同时命一个名字name，这样在引用模板的地方才可以识别调用。

　　现在我们在index.wxml中引用这个模板

　　?

　　/**index.wxss**/

　　.pages-container {

　　height: 100%;

　　display: flex;

　　flex-direction: column;

　　box-sizing: border-box;

　　padding-top: 10rpx;

　　padding-bottom: 10rpx;

　　}

　　.pages-title-bg {

　　width: 100%;

　　}

　　.pages-wrapper {

　　}

　　.pages-row {

　　width: 100%;

　　display: flex;

　　flex-direction: row;

　　justify-content: space-around;

　　}

　　.pages-item {

　　position: relative;

　　padding: 10rpx;

　　width: 33%;

　　background-color: #fff;

　　border: #ddd solid 1px;

　　}

　　.pages-icon-wrapper {

　　display: flex;

　　justify-content: space-around;

　　align-items: center;

　　margin: 10rpx;

　　border-radius: 30%;

　　height: 75%;

　　background:#00CD0D;

　　}

　　.pages-icon-wrapper-no-bg {

　　display: flex;

　　justify-content: space-around;

　　align-items: center;

　　margin: 10rpx;

　　height: 75%;

　　}

　　.pages-icon {

　　width: 100rpx;

　　height: 100rpx;

　　}

　　.pages-text-wrapper {

　　text-align: center;

　　}

　　.pages-text {

　　font-weight: bolder;

　　}

　　我们模板中使用navigator元素来呈现格子，所以每个格子自然就可以导航了。

　　参照以上的步骤和代码，你就可以进行微信小程序九宫格布局的开发了，怎么样，是不是很简单呢?如果看不明白，那就动手试一试吧。更多相关资料请关注微信小程序素材网。

　　微信小程序页面布局的方式有哪些

　　微信小程序导航布局技巧有哪些

　　微信小程序表格布局怎么弄