第微信小程序?qū)崿F(xiàn)九宮格效果本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)九宮格效果的具體代碼，供大家參考，具體內(nèi)容如下

1.九宮格實(shí)現(xiàn)示例圖：

Tips:說明：

使用display:-webkit-flex;對(duì)布局做兼容。

保證每排三個(gè)圖標(biāo)的兩對(duì)對(duì)齊，采用：justify-content:space-between;屬性。

父元素必須設(shè)置flex-wrap:wrap;屬性進(jìn)行換行，否則會(huì)在一排展示。

個(gè)子元素的寬度width:33.33333333%;按照其占位大小分配。

使用justify-content:center;屬性設(shè)置元素居中。

使用flex-direction:column;和flex-wrap:wrap;屬性設(shè)置icon和text元素豎直排列。

2.在.js文件中定義數(shù)據(jù)源：

Page({

*頁(yè)面數(shù)據(jù)源

data:{

iconColor:[

'red','orange','yellow','green','rgb(0,255,255)','blue','purple'

iconStyle:[

"type":"success",

"size":30,

"color":"#32CD32"

"type":"success_no_circle",

"size":30,

"color":"orange"

"type":"info",

"size":30,

"color":"yellow"

"type":"warn",

"size":30,

"color":"green"

"type":"waiting",

"size":30,

"color":"rgb(0,255,255)"

"type":"cancel",

"size":30,

"color":"blue"

"type":"download",

"size":30,

"color":"purple"

"type":"search",

"size":30,

"color":"#C4C4C4"

"type":"clear",

"size":30,

"color":"red"

})

3.在.wxss文件中定義樣式如下：

九宮格容器布局樣式

.grid-item-container{

display:-webkit-flex;

display:flex;

align-items:center;

justify-content:space-between;

flex-wrap:wrap;

border-top:1rpxsolid#D9D9D9;

item容器樣式

.grid-item-child{

display:flex;

display:-webkit-flex;

justify-content:center;

flex-direction:column;

flex-wrap:wrap;

float:left;

width:33.33333333%;

height:200rpx;

box-sizing:border-box;

background-color:#FFFFFF;

border-right:1rpxsolid#D9D9D9;

border-bottom:1rpxsolid#D9D9D9;

icon樣式

.grid-item-icon{

display:flex;

display:-webkit-flex;

justify-content:center;

文本樣式

.grid-item-label{

display:flex;

display:-webkit-flex;

justify-content:center;

color:#666;

font-size:14px;

}

4.在.wxml文件中具體使用：

view

blockwx:for="{{iconStyle}}"wx:key="index"

view

view

icontype='{{item.type}}'size='{{item.size}}'color='{{item.color}}'/