开发小程序(一)设置四宫格

需求：首页设置一个带有文字的简单四宫格

需要的技术支持：

1、顶部留空

2、背后的色彩块够大

3、色彩块不能顶格

4、其中的文字居中但不能顶格

---

 

代码采用两页：wxml+wxss，目前我个人水平有限，如果采用for是没办法做到定义每个色块的背景和文字颜色，所以直接拆分为最笨的办法，一个色块写一个css代码

<!--index.wxml-->
<view class="container">

	<text class="dingbu" decode>&nbsp;&nbsp;</text>
  <view class="weui-grids">

	<view class="weui-grid" >
      <navigator url="..此处是你的连接">
		<text class="weui-grid__label" decode>&nbsp;&nbsp;</text>
		<text class="weui-grid__label">1</text>
        <text class="weui-grid__label">文字一</text>
		<text class="weui-grid__label">　</text>
      </navigator>
    </view>

	<view class="weui-grid" >
      <navigator url="..此处是你的连接">
		<text class="weui-grid__labe2" decode>&nbsp;&nbsp;</text>
		<text class="weui-grid__labe2">2</text>
        <text class="weui-grid__labe2">文字二</text>
		<text class="weui-grid__labe2">　</text>
      </navigator>
    </view>


	<view class="weui-grid" >
      <navigator url="..此处是你的连接">
		<text class="weui-grid__labe3" decode>&nbsp;&nbsp;</text>
		<text class="weui-grid__labe3">3</text>
        <text class="weui-grid__labe3">文字三</text>
		<text class="weui-grid__labe3">　</text>
      </navigator>
    </view>


	<view class="weui-grid" >
      <navigator url="..此处是你的连接">
		<text class="weui-grid__labe4" decode>&nbsp;&nbsp;</text>
		<text class="weui-grid__labe4">4</text>
        <text class="weui-grid__labe4">文字四</text>
		<text class="weui-grid__labe4">　</text>
      </navigator>
    </view>


  </view>
</view>

/**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: 50%;
    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__label {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #fdfbfb;
    font-size: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: rgb(248, 193, 12);
  }

  .weui-grid__labe2 {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    font-size: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: rgb(15, 165, 15);
  }

  .weui-grid__labe3 {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    font-size: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: rgb(69, 111, 250);
  }

  .weui-grid__labe4 {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #fdfcfc;
    font-size: 17px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: rgb(110, 53, 243);
  }

  .dingbu {
    margin-top: 100rpx;
  }

---

探索历程，刚开始找不到空格，后来在论坛上查找到有两种实现方式，一种是全角的空格，一种是如下：

<text decode>&nbsp;&nbsp;</text>

九宫格和四宫格的核心代码是wxss中的weui-grid

四宫格：

 .weui-grid {

    width: 50%;

  }

九宫格

 .weui-grid {

    width: 33.3333%;

  }

 以上代码思路来源：小程序开发系列(四)九宫格另一种实现 - _学而时习之 - 博客园