微信小程序九宫格

九宫格
一、代码部分：
Js:
Page({
data: { //同步更新数据
grids: [0, 1, 2, 3, 4, 5, 6, 7, 8] //9个格子
}
});
Wxml:


Grid
九宫格



//wx:for循环显示数组 其中可添加js中的对象名 wx:key 指定列表中项目的唯一标识符
//url 可添加跳转的路径
// src 可添加图片路径
Grid





json:
{
“usingComponents”: {}
}
Wxss:
.weui-grids {
border-top: 1rpx solid #D9D9D9;
border-left: 1rpx solid #D9D9D9;
overflow: hidden;
}
.weui-grid {
position: relative;
float: left;
padding: 20px 10px;
width: 33.33333333%;
box-sizing: border-box;
border-right: 1rpx solid #D9D9D9;
border-bottom: 1rpx solid #D9D9D9;
}
.weui-grid_active {
background-color: #ECECEC;
}
.weui-grid__icon {
displa