九宫格布局

九宫格布局在移动端使用较多，总结一下自己的方法。微信小程序实现三行三列的九宫格

方法1：使用百分比

        一个父容器设置宽度为100%，父容器中包含九个小格子，宽度为父容器的33.3%（此处需要自己调试），然后使其横向排列，三格结束自动挤到下一行排列。

方法二：使用wx：for创建一个三行三列的九宫格。此处就是js中的双层for循环原理，在小程序中显示两个对象的嵌套。第一次循环第一个对象（obj），第二次循环第一个对象中的另外一个对象（obj.items），弹性盒子布局。

    obj:[
      {
        id:0,
        items:[
          { id: 0, src: '../../img/12.jpg', text: '代办理赔' },
          { id: 1, src: '../../img/12.jpg', text: '拖车' },
          { id: 2, src: '../../img/12.jpg', text: '紧急救援' },
        ],
      },{
        id:1,
        items:[
          { id: 3, src: '../../img/12.jpg', text: '事故车定损' },
          {id: 4, src: '../../img/12.jpg', text: '保险代理' },
          {id: 5, src: '../../img/12.jpg', text: '查勘定损' }
        ]
      },{
        id: 3,
        items1: [
          { id: 6, src: '../../img/12.jpg', text: '数据统计' },
          { id: 7, src: '../../img/12.jpg', text: '修改密码' },
          { id: 8, src: '../../img/12.jpg', text: '退出登录' }
        ]
      }

    ],

具体实现如下：

wxml代码实现简单样式搭建：

    <view class="page-zong"  wx:for="{{obj}}" wx:key="{{id}}">
      <block wx:for="{{item.items}}" wx:key="{{id}}" wx:for-item="items" >
        <view class="page-section" bindtap="bind" data-name="{{items.text}}">
               <view class="img">
                  <image src="{{items.src}}" title="{{items.src}}" alt="{{items.src}}"></image>
              </view>
              <view class="pages-text-zong">
                  <text class="pages-text">{{items.text}}</text>
              </view>
        </view>
      </block>
    </view>

js数据的填充：

    obj:[
      {
        id:0,
        items:[
          { id: 0, src: '../../img/12.jpg', text: '代办理赔' },
          { id: 1, src: '../../img/12.jpg', text: '拖车' },
          { id: 2, src: '../../img/12.jpg', text: '紧急救援' },
        ],
      },{
        id:1,
        items:[
          { id: 3, src: '../../img/12.jpg', text: '事故车定损' },
          {id: 4, src: '../../img/12.jpg', text: '保险代理' },
          {id: 5, src: '../../img/12.jpg', text: '查勘定损' }
        ]
      },{
        id: 3,
        items: [
          { id: 6, src: '../../img/12.jpg', text: '数据统计' },
          { id: 7, src: '../../img/12.jpg', text: '修改密码' },
          { id: 8, src: '../../img/12.jpg', text: '退出登录' }
        ]
      }

    ]

wxss的渲染：使用rem和%使其不同屏幕的更合自适应。

.page-zong{
  width: 102%;（有凹陷的感觉，需调试合适尺寸）
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: -1%;
}
.page-section{
  flex: 1;
  border: 0.1rem solid lightgray;
  padding: 1rem 0.5rem;
  text-align: center;
}
.pages-text{
  font-size: 0.8rem;
  display: inline-block;
  margin: 0.6rem auto 0rem auto;
  font-weight: 600;
}
image{
  width: 50%;
  height: 3rem;
}