1.

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

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

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

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

6.

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

7.JS文件如下

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

8.接下来是重点WXML

9.

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

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

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

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

14.

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

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

17.现在是两个

18.

19.代码如下

i-gridi-rowi-grid-itemi-grid-iconi-iconsize="24"type="activity"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="addressbook"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-item/i-row/i-grid

20.三个：

21.

i-gridi-rowi-grid-itemi-grid-iconi-iconsize="24"type="activity"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="addressbook"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="barrage"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-item/i-row/i-grid

22.九个如图一：

i-gridi-rowi-grid-itemi-grid-iconi-iconsize="24"type="activity"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="addressbook"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="barrage"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-item/i-rowi-rowi-grid-itemi-grid-iconi-iconsize="24"type="collection"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="computer"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="coupons"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-item/i-rowi-rowi-grid-itemi-grid-iconi-iconsize="24"type="flag"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="interactive"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-itemi-grid-itemi-grid-iconi-iconsize="24"type="mail"/i-grid-label宫格/i-grid-label/i-grid-icon/i-grid-item/i-row/i-grid