先上效果图
使用注意事项
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,})},})
