小程序開發系列(四)九宮格另外一種實現

在《小程序開發系列(二)九宮格》中實現了一種九宮的排布方法，如今提供另外一種實現，代碼以下

<!--index.wxml-->
<view class="container">
  <view class="weui-grids">
    <view class="weui-grid" wx:for="{{routers}}" wx:key="name">
      <navigator url="{{item.url}}">
        <view class="weui-grid__icon">
          <image src=" {{item.icon}}" mode="scaleToFill" />
        </view>
        <text class="weui-grid__label">{{item.name}}</text>
      </navigator>
    </view>
  </view>
</view>

界面代碼中使用for循環的方式來展開，而後使用view來包裹，再將要包裹的內容放到內部，由於九宮格經常用做首頁的功能塊索引，因此內部增長了navigator的導航索引來實現。對於for循環中的數據直接在index.js中的data加入一個數組便可，代碼以下。

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    routers: [
      {
        name: 'T1',
        url: '',
        icon: ''
      },
      {
        name: 'T2',
        url: '',
        icon: ''
      },
      {
        name: 'T3',
        url: '',
        icon: ''
      },
       {
        name: 'T4',
        url:'',
        icon:'' 
      },
       {
        name: 'T5',
        url:'',
        icon:'' 
      },
       {
        name: 'T6',
        url:'',
        icon:'' 
      },
       {
        name: 'T7',
        url:'',
        icon:'' 
      },
       {
        name: 'T8',
        url:'',
        icon:'' 
      },
       {
        name: 'T9',
        url:'',
        icon:'' 
      }
    ]
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
  }
})

下面是控制佈局的樣式代碼

/**index.wxss**/
.weui-grids {
  position: relative;
  overflow: hidden;
}
.weui-grids:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.weui-grids:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.weui-grid {
  position: relative;
  float: left;
  padding: 20px 10px;
  width: 33.33333333%;
  box-sizing: border-box;
}
.weui-grid:before {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.weui-grid:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.weui-grid:active {
  background-color: #ECECEC;
}
.weui-grid__icon {
  width: 32px;
  height: 32px;
  margin: 0 auto;
}
.weui-grid__icon image {
  display: block;
  width: 100%;
  height: 100%;
}
.weui-grid__icon + .weui-grid__label {
  margin-top: 5px;
}
.weui-grid__label {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #000000;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

核心是weui-grid的width:33.33333%，這樣就確保了一行只能排3塊。上面的樣式代碼使用的是微信的weui的九宮格樣式。

效果圖

轉載請註明出處。