小程序模板网

如意小程序开发实战:实现九宫格界面的导航

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

 
 
 

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

 

			
  1. var PageItems =
  2. [
  3. {
  4. text: '格子1',
  5. icon: '../../images/c1.png',
  6. route: '../c1/c1',
  7. },
  8. {
  9. text: '格子2',
  10. icon: '../../images/c2.png',
  11. route: '../c2/c2',
  12. },
  13. {
  14. text: '格子3',
  15. icon: '../../images/c3.png',
  16. route: '../c3/c3',
  17. },
  18. {
  19. text: '格子4',
  20. icon: '../../images/c4.png',
  21. route: '../c4/c4',
  22. },
  23. {
  24. text: '格子5',
  25. icon: '../../images/c5',
  26. route: '../c5/c5',
  27. },
  28. {
  29. text: '格子6',
  30. icon: '../../images/c6.png',
  31. route: '../c6/c6',
  32. },
  33. {
  34. text: '格子7',
  35. icon: '../../images/c7.png',
  36. route: '../c7/c7',
  37. },
  38. {
  39. text: '格子8',
  40. icon: '../../images/c8',
  41. route: '../c8/c8',
  42. },
  43. {
  44. text: '格子9',
  45. icon: '../../images/c9.png',
  46. route: '../c9/c9',
  47. }
  48. ];
  49. module.exports = {
  50. PageItems: PageItems
  51. }

在index.js页面中我们引用routes.js,然后得到数据PageItems,但PageItems是一维数组,而我们前面思考是要用一行三列为一个组的,所以需要将这一维数组进行重新组合,最直接的方法就是生成一个数组,每个数组的元素又包含了一个只有三个元素的一维数组,代码如下  [javascript]

 

			
  1. //index.js
  2. //获取应用实例
  3. var app = getApp()
  4. var routes = require('routes');
  5. Page({
  6. data: {
  7. userInfo: {},
  8. cellHeight: '120px',
  9. pageItems: []
  10. },
  11. //事件处理函数
  12. onLoad: function () {
  13. var that = this
  14. console.log(app);
  15. //调用应用实例的方法获取全局数据
  16. app.getUserInfo(function (userInfo) {
  17. wx.setNavigationBarTitle({
  18. title: '全新测试追踪系统-' + userInfo.nickName,
  19. success: function (res) {
  20. // success
  21. }
  22. })
  23. that.setData({
  24. userInfo: userInfo
  25. })
  26. var pageItems = [];
  27. var row = [];
  28. var len = routes.PageItems.length;//重组PageItems
  29. len = Math.floor((len + 2) / 3) * 3;
  30. for (var i = 0; i < len; i++) {
  31. if ((i + 1) % 3 == 0) {
  32. row.push(indexs.PageItems[i]);
  33. pageItems.push(row);
  34. row = [];
  35. continue;
  36. }
  37. else {
  38. row.push(indexs.PageItems[i]);


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/17956.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询