微信小程序 九宫格导航

menu.js

// pages/menu/menu.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navs: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var page = this;
    var navData = this.loadNavData();
    page.setData({ navs: navData });
  },

  navBtn: function (e) {
    console.log(e);
    var id = e.currentTarget.id;
    if (id == "0") {
      wx.navigateTo({
        url: '../line/line'
      })
    }

  },

  loadNavData: function () {
    var navs = [];
    var nav0 = new Object();
    nav0.img = '../../images/1.png';
    nav0.name = '模块1';
    nav0.width = '64';
    nav0.height = '64';
    navs[0] = nav0;

    var nav1 = new Object();
    nav1.img = '../../images/2.png';
    nav1.name = '模块2';
    nav1.width = '64';
    nav1.height = '64';
    navs[1] = nav1;

    var nav2 = new Object();
    nav2.img = '../../images/3.png';
    nav2.name = '模块3';
    nav2.width = '64';
    nav2.height = '64';
    navs[2] = nav2;

    var nav3 = new Object();
    nav3.img = '../../images/4.png';
    nav3.name = '模块4';
    nav3.width = '64';
    nav3.height = '64';
    navs[3] = nav3;

    var nav4 = new Object();
    nav4.img = '../../images/5.png';
    nav4.name = '模块5';
    nav4.width = '64';
    nav4.height = '64';
    navs[4] = nav4;

    var nav5 = new Object();
    nav5.img = '../../images/6.png';
    nav5.name = '模块6';
    nav5.width = '64';
    nav5.height = '64';
    navs[5] = nav5;

    var nav6 = new Object();
    nav6.img = '../../images/7.png';
    nav6.name = '模块7';
    nav6.width = '64';
    nav6.height = '64';
    navs[6] = nav6;

    var nav7 = new Object();
    nav7.img = '../../images/8.png';
    nav7.name = '模块8';
    nav7.width = '64';
    nav7.height = '64';
    navs[7] = nav7;

    var nav8 = new Object();
    nav8.img = '../../images/9.png';
    nav8.name = '模块9';
    nav8.width = '64';
    nav8.height = '64';
    navs[8] = nav8;

    var nav9 = new Object();
    nav9.img = '../../images/10.png';
    nav9.name = '模块10';
    nav9.width = '64';
    nav9.height = '64';
    navs[9] = nav9;

    var nav10 = new Object();
    nav10.img = '../../images/11.png';
    nav10.name = '模块11';
    nav10.width = '64';
    nav10.height = '64';
    navs[10] = nav10;

    var nav11 = new Object();
    nav11.img = '../../images/12.png';
    nav11.name = '模块12';
    nav11.width = '64';
    nav11.height = '64';
    navs[11] = nav11;

    var nav12 = new Object();
    nav12.img = '../../images/13.png';
    nav12.name = '模块13';
    nav12.width = '64';
    nav12.height = '64';
    navs[12] = nav12;

    var nav13 = new Object();
    nav13.img = '../../images/14.png';
    nav13.name = '模块14';
    nav13.width = '64';
    nav13.height = '64';
    navs[13] = nav13;

    var nav14 = new Object();
    nav14.img = '../../images/15.png';
    nav14.name = '模块15';
    nav14.width = '64';
    nav14.height = '64';
    navs[14] = nav14;

    var nav15 = new Object();
    nav15.img = '../../images/16.png';
    nav15.name = '模块16';
    nav15.width = '64';
    nav15.height = '64';
    navs[15] = nav15;

    return navs;
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

menu.wxml

<!--pages/menu/menu.wxml-->
<text>模块菜单</text>

<view class="nav">
  <block wx:for="{{navs}}">
    <view class="item" bindtap="navBtn" id="{{index}}">
      <view>
        <image src="{{item.img}}" style="width:{{item.width}}px;height:{{item.height}}px;"></image>
      </view>
      <view>
        {{item.name}}
      </view>
    </view>
  </block>
</view>

menu.wxss

/* pages/menu/menu.wxss */
.nav{
  text-align: left;
}
.item{
   margin-top:15px; 
   text-align: center;
   font-family: "Microsoft YaHei";
   font-size: 13px;
   width: 24%;
   display: inline-block;
}