本文共 2534 字，大约阅读时间需要 8 分钟。

九宫格

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

推荐使用场景：

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

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

简而言之：　

　　列表展示 - 是一种固定展示方式。 　　九宫展示 - 是一直推荐筛选的展示方式。 第一步先导入dist包 不懂的去看我的上一篇文章

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

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

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

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

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

现在是两个

 代码如下

     
        
             
                   
                    
       
        宫格
                
           
          
                 
                      
                       
       
        宫格
                   
              
       
    
   

三个： 

 

     
        
             
                   
                    
       
        宫格
                
           
          
                 
                      
                       
       
        宫格
                   
              
              
                 
                      
                       
       
        宫格
                   
              
       
    
   

九个如图一：

       
            
                 
                      
                       
       
        宫格
                   
              
             
                 
                      
                       
       
        宫格
                   
              
             
                 
                      
                       
       
        宫格
                   
              
         
        
            
                 
                      
                       
       
        宫格
                   
              
             
                 
                      
                       
       
        宫格
                   
              
             
                 
                      
                       
       
        宫格
                   
              
         
        
            
                 
                      
                       
       
        宫格
                   
              
             
                 
                      
                       
       
        宫格
                   
              
             
                 
                      
                       
       
        宫格