微信小程序之官方UI框架 iView UI 之 Grid宫格布局

九宫格
　　优点 - 视觉感染力更强，用户同时间可获取到的内容更多。

推荐使用场景：
　　在固定菜单选项内容中，用户更加适应使用列表的方式进行查找和使用。条目清晰同时展示明确。用户可以快速的定位并操作记忆。

　　在推荐性质较强，或需要进行赛选的列表中，使用九宫格。

简而言之：　
　　列表展示 - 是一种固定展示方式。
　　九宫展示 - 是一直推荐筛选的展示方式。
第一步先导入dist包 不懂的去看我的上一篇文章https://blog.csdn.net/qq_41542894/article/details/81277629

WXSS代码如下
.row-class{
    background: #fff;
}
.col-class{
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    background: #2d8cf0;
    font-size: 12px;
}
.col-class.light{
    background: #5cadff;
}

JS文件如下

Page({
  data: {
    isAdd: false
  },
  handleAdd() {
    this.setData({
      isAdd: !this.data.isAdd
    })
  }

})

接下来是重点WXML

 最外层的<i-grid>表示全局的  <i-row>表示的行  <i-grid-item>表示的是列   <i-grid-icon>表的图标的样式  

如果去掉<i-grid-icon> 会成为这样的 加上会回归中间

底下我就不多说了 你们都明白的  

这一块代码代表一个宫格  如果要第二个 再加一个

中间这两行代表的就是图标和图标下面的字了  不过如果不改变的话可以直接调用此样式

刚才只有一段代码 只能是一个宫格

现在是两个

 代码如下

<i-grid>
  <i-row>
    <i-grid-item>
        <i-grid-icon>
             <i-icon size="24" type="activity" />
             <i-grid-label>宫格</i-grid-label>
         </i-grid-icon>
     </i-grid-item>
     <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="addressbook" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
  </i-row>
</i-grid>

三个： 

 

<i-grid>
  <i-row>
    <i-grid-item>
        <i-grid-icon>
             <i-icon size="24" type="activity" />
             <i-grid-label>宫格</i-grid-label>
         </i-grid-icon>
     </i-grid-item>
     <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="addressbook" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
         <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="barrage" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
  </i-row>
</i-grid>

九个如图一：

<i-grid>
    <i-row>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="activity" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="addressbook" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="barrage" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
    </i-row>
    <i-row>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="collection" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="computer" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="coupons" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
    </i-row>
    <i-row>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="flag" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="interactive" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
        <i-grid-item>
            <i-grid-icon>
                <i-icon size="24" type="mail" />
                <i-grid-label>宫格</i-grid-label>
            </i-grid-icon>
        </i-grid-item>
    </i-row>
</i-grid>

 

来源：CSDN

作者：Fighting社火底子

链接：https://blog.csdn.net/qq_41542894/article/details/81294589