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

版权声明： https://blog.csdn.net/qq_41542894/article/details/81294589

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

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

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

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

[code]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文件如下

[code]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> 会成为这样的  加上会回归中间

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

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

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

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

现在是两个

 代码如下

[code]<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>

三个： 

 

[code]<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>

九个如图一：

[code]<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>

 

阅读更多