小程序 九宫格

<view class="grid-list">
  <view class="grid-item" wx:for="{{ gridData }}" wx:key="id">
    <image src="{{item.icon }}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

.grid-list{
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}
.grid-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}
.grid-item image{
  width: 60rpx;
  height: 60rpx;
}
.grid-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}

  data: {
    gridData:[
      {id:1,name:'首页',icon:'/images/i1.png',aicon:'/images/i1a.png'},
      {id:2,name:'飞机',icon:'/images/i2.png',aicon:'/images/i2a.png'},
      {id:3,name:'入口',icon:'/images/i3.png',aicon:'/images/i3a.png'},
      {id:4,name:'首页',icon:'/images/i1.png',aicon:'/images/i1a.png'},
      {id:5,name:'飞机',icon:'/images/i2.png',aicon:'/images/i2a.png'},
      {id:6,name:'入口',icon:'/images/i3.png',aicon:'/images/i3a.png'},
      {id:7,name:'首页',icon:'/images/i1.png',aicon:'/images/i1a.png'},
      {id:8,name:'飞机',icon:'/images/i2.png',aicon:'/images/i2a.png'},
      {id:9,name:'入口',icon:'/images/i3.png',aicon:'/images/i3a.png'}
    ]
  }