先上效果图
使用注意事项
1:注意在app.json中注册页面路径
2:如果要增加新的Item,可到js中对listService数组进行增加
3:listService参数[
title:分类标题
items:这个分类下的所有Item[
name:这个Item的名字
url:这个Item点击跳转路径
icon:图标
]]
WXML代码
<view id='services' class='services'>
<view class="grid" wx:for="{{servers}}" wx:key="">
<view class='grid-title'>
<text>{{item.title}}</text>
</view>
<view class='grid-items'>
<block wx:for="{{item.items}}" wx:key="">
<view class='grid-item'>
<view wx:if="{{item.enabled}}" class='mask'>
<text>{{item.detail}}</text>
</view>
<view class='navigator' data-path='{{item.url}}' data-isBind='{{item.isBind}}' bindtap='bindNavigator' hover-class="none">
<view class='item-content'>
<view class="item-content-icon">
<image src="{{item.icon}}" mode="scaleToFill" />
</view>
<text class="weui-grid_label">{{item.name}}</text>
</view>
</view>
</view>
</block>
</view>
</view>
</view>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,
})
},
})