小程序开发系列(四)九宫格另一种实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xxdddail/article/details/70314211

在《小程序开发系列(二)九宫格》中实现了一种九宫的排布方法，现在提供另一种实现，代码如下

<!--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的九宫格样式。

效果图

转载请注明出处。