当前位置:主页 > 微信开发 > WeUI >

微信网页开发基础组件九宫格Grid

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-03
  grid 九宫格主要用来进分类用的,例如,我们看到过一些导航网站,在一个页面上面有很多网站链接,这些链接就像放在一个格子里面似的,所以,叫作九宫格。

  类似微信钱包界面中的九宫格,就是一些功能的入口,这个组件非常有用,在做微信小程序或是微信公众号开发时会常常用到这个功能。

  九宫格可以方便的把一个类或功能进行分类,便于用户分类查询信息,如果在微信里面往往作为一个入口的链接,九宫格并不是指只能放九个,每行放三个,可以放任意多个。

示例


代码示例:

  <div class="weui-grids">
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="#"            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="#"            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="#"            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="#"            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
 
    </div>

九宫格结构:

  在一个div里面定义多个a,每个a标签里面是由一div定义一个图标,在图标下面是一个p标签定义的图标(或分类)的文本说明。这就是像本站首页的微信小程序版块展示的缩略图一样,缩略图下面是文本。

源码分析

  1)weui-grids:

  这个类就可以理解为九宫格的盒子,也就是对九宫格的整体做一个样式定义。也可以理解为九宫格的列表的一个盒子模型,里面的a都是一个一个的小部件。
 

  .weui-grids {
  position: relative;
  overflow: hidden;
}


  定义了九宫格的定义方式为相对定义。

  并且,定义了这个类weui-grids所在的盒子模型前后的样式:

.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);
}


  2) 类weui-grid:

  这个类定义了整修a标签超链接的类.weui-grid:
 

.weui-grid {
  position: relative;
  float: left;
  padding: 20px 10px;
  width: 33.33333333%;
  box-sizing: border-box;
}


  定义了a标签的相对定位,左浮动,内边距宽度,从这个宽度可以看出九宫格是一个响应式的。

  并且,定义了在激活时的颜色:
 

.weui-grid:active {
  background-color: #ECECEC;
}


  同时在类weui-grid前后定义了样式。

  3)类weui-grid__icon:

  定义了九宫格的图标样式:
 

.weui-grid__icon {
  width: 28px;
  height: 28px;
  margin: 0 auto;
}


  并且,定义了标签<img> 的样式为宽和高自适应。
 

.weui-grid__icon img {
  display: block;
  width: 100%;
  height: 100%;
}


  4) 类weui-grid__label:

  定义图标与文本的上边距为5px。
 

.weui-grid__icon + .weui-grid__label {
  margin-top: 5px;
}


  如果文本内容比较长时,则实行省略方式把多余的内容省略掉。
 

.weui-grid__label {
  display: block;
  text-align: center;
  color: #000000;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}