先上效果图
使用注意事项
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, }) },})
发表评论 取消回复