微信小程序之Index（仿淘寶分類入口）

1.邏輯層

index.js

//index.js
//獲取應用實例
const app = getApp()

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    menu: {
      imgUrls: [
        'http://gw.alicdn.com/tps/i2/TB19BluIVXXXXX6XpXXN4ls0XXX-183-129.png?imgtag=avatar',
        'http://gw.alicdn.com/tps/TB1FDOHLVXXXXcZXFXXXXXXXXXX-183-129.png?imgtag=avatar',
        'http://gw.alicdn.com/tps/TB1PlmNLVXXXXXEXFXXXXXXXXXX-183-129.png?imgtag=avatar',
        'http://gw.alicdn.com/tps/TB1RN0HMFXXXXXNXpXXXXXXXXXX-183-129.png?imgtag=avatar',
        'http://gw.alicdn.com/tps/TB1exaOLVXXXXXeXFXXXXXXXXXX-183-129.png?imgtag=avatar',
        'http://img.alicdn.com/tps/TB1GzMJLXXXXXXoXXXXXXXXXXXX-183-129.png',
        'http://gw.alicdn.com/tps/i3/TB1Ewu2KVXXXXXkapXXN4ls0XXX-183-129.png',
        'http://gw.alicdn.com/tps/TB1cniBJpXXXXataXXXXXXXXXXX-183-129.png?imgtag=avatar',
        'http://img.alicdn.com/tps/TB1caopLVXXXXaDaXXXXXXXXXXX-183-129.png',
        'http://gw.alicdn.com/tps/i1/TB1c1FMIpXXXXawXpXXN4ls0XXX-183-129.png?imgtag=avatar'
      ],
      descs: [
        '聚劃算',
        '天貓',
        '天貓國際',
        '外賣',
        '天貓超市',
        '充值中心',
        '阿里旅行',
        '領金幣',
        '到家',
        '分類'
      ]
    }
  },

  /**
   * 生命周期函數--監(jiān)聽頁面加載
   */
  onLoad: function (options) {

  }
})

2.頁面布局

index.wxml

{{menu.descs[index]}}

3.樣式

index.wxss

/**index.wxss**/
.menu-wrp {  
  width:100%;
  margin-top:20rpx;  
}  
.menu-wrp:after{  
  content:"";  
  display:block;  
  clear:both;  
}  
  
.menu-list{  
  float:left;  
  width:20%;  
  box-sizing: border-box;  
  padding-bottom:10px;  
}  
  
.menu-img{  
  width:120rpx;    
  height:84rpx;  
  display:block;  
  margin:0 auto;  
  margin-bottom:5px;  
}  
.menu-desc{  
  background-color:#ffffff;  
  color:#333333;  
  width:100%;  
  text-align: center;  
  display:block;  
  font-size:12px;
}  
.gap-1,.gap-2{  
  width:100%;  
  height:10rpx;  
  background:rgb(238, 238, 238);
}

4.效果圖