先上效果图

使用注意事项

1:注意在app.json中注册页面路径

2:如果要增加新的Item,可到js中对listService数组进行增加

3:listService参数[

title:分类标题

items:这个分类下的所有Item[

name:这个Item的名字

url:这个Item点击跳转路径

icon:图标

]]

WXML代码

{{item.title}}

{{item.detail}}

{{item.name}}

WXSS

page{

background:#eeecec;

}

.enable{

z-index: 99999;

background: #404040;

opacity: 0.8;

position: absolute;

width: 100;

bottom: 0px;

top: 0px;

left: 0px;

right: 0px;

display: flex;

justify-content: center;

align-items: center;

color: #ffffff;

}

.enable text{

color: #fafafa;

font-size: 18px;

font-weight: bold;

}

.grid {

background: #ffffff;

margin-bottom:10px;

}

.services{

background:#f5f5f5;

}

.navigator{

padding:20px 10px;

}

.grid-items {

position: relative;

overflow: hidden;

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

.grid-items::before{

content: " ";

position: absolute;

left: 0;

top: 0;

right: 0;

height: 1px;

border-top: 1px solid #d9d9d9;

}

.grid-items::after{

content: "";

position: absolute;

left: 0;

top: 0;

width: 1px;

bottom: 0;

border-left: 1px solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: scaleX(0.5);

transform: scaleX(0.5);

}

.grid-item{

position: relative;

float: left;

width: 33.33333333%;

box-sizing: border-box;

}

.grid-item::before{

content: " ";

position: absolute;

right: 0;

top: 0;

width: 1px;

bottom: 0;

border-right: 1px solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 100% 0;

transform-origin: 100% 0;

-webkit-transform: scaleX(0.5);

transform: scaleX(0.5);

}

.grid-item::after{

content: " ";

position: absolute;

left: 0;

bottom: 0;

right: 0;

height: 1px;

border-bottom: 1px solid #d9d9d9;

color: #d9d9d9;

-webkit-transform-origin: 0 100%;

transform-origin: 0 100%;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

.item-content{

position: relative;

padding: 0px 0px;

width: 100%;

box-sizing: border-box;

}

.item-content-icon{

width: 32px;

height: 32px;

margin: 0 auto;

}

.item-content-icon image{

display: block;

width: 100%;

height: 100%;

}

.weui-grid_label {

display: block;

text-align: center;

font-weight: bold;

color: #707070;

font-size: 16px;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

}

.grid-title{

display: block;

font-weight: bold;

color: #707070;

font-size: 14px;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

padding: 7px;

}

.mask{

width: 100%;

height: 100%;

position: absolute;

z-index: 999;

text-align: center;

background: rgba(0, 0, 0, 0.619);

color: #eee8e8;

line-height: 32px;

display: flex;

}

最重要的JS

const app = getApp()

Page({

data: {

servers:[]

},

onLoad: function () {

var listService = [

{

title: '社会',

items: [{

name: '捐助',

url: '/pages/TestPage/TestPage',

icon: '/imgs/love.png',

code: '11'

},

{

isBind: true,

name: '捐衣物',

url: '',

icon: '/imgs/clothes.png',

code: '11'

}

]

},

{

title: '生活',

items: [{

name: '微信',

url: '',

icon: '/imgs/wechat.png',

code: '11'

},

{

isBind: true,

name: '微信',

url: '',

icon: '/imgs/wechat.png',

code: '11'

}, {

isBind: true,

name: '火车票',

url: '',

icon: '/imgs/tick.png',

code: '11'

},

]

},

{

title: '家庭',

items: [{

isBind: true,

name: '账单',

url: '',

icon: '/imgs/bill.png',

code: '11'

}

]

}, {

title: '其他服务',

items: []

}

]

this.setData({

servers: listService

})

},

/**

* 当点击Item的时候传递过来

*/

bindNavigator: function (e) {

wx.navigateTo({

url: e.currentTarget.dataset.path,

})

},

})