微信小程序九宫格实例代码

这篇文章主要介绍了微信小程序 九宫格实例代码的相关资料,需要的朋友可以参考下

微信小程序 九宫格

实现效果图：

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==null的时候，我们希望呈现的是一个空背景的格子，在有数据的时候我们希望呈现一个含背景的格子，所以"{{text==null||text.length==0?'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".

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

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