先上效果图

使用注意事项

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,
}) },
})

微信小程序九宫格布局的更多相关文章

  1. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  2. 关于微信小程序<radio-group>布局排列

    微信小程序更新以后今天<radio>全部变成垂直排列了,布局乱了. 一开始尝试给外层<view>添加display:flex;flex-direction:row:未果. 后来 ...

  3. 微信小程序~Flex布局

    有一点需要注意的是,你的小程序要求兼容到iOS8以下版本,需要开启样式自动补全.开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”.

  4. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  5. 微信小程序—Flex布局

    参考教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html     https://xluos.github.io/demo/flexb ...

  6. 转载:微信小程序view布局

    https://www.cnblogs.com/sun8134/p/6395947.html

  7. 微信小程序flex布局

    一.flex布局基础 二.相对定位和绝对定位   flex的容器和元素   主轴(左-右),交叉轴(上-下)     flex容器属性详解 flex-direction 决定元素的排列方向(默认row ...

  8. 微信小程序-flex布局中align-items和align-self区别

    首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...

  9. 微信小程序 view 布局

    刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性”row” ...

随机推荐

  1. XMU C语言程序设计实践(4)

    以下实验二选一. 1.使用队列实现迷宫算法,找到最短路径. 2.实现顺序队列和链队列的所有基本操作,InitQueue(&Q):DestroyQueue(&Q):ClearQueue( ...

  2. 底层并发APIs_源自objc.io

    本文由webfrogs译自objc.io,原文作者Daniel Eggert.   小引 本篇英文原文所发布的站点objc.io是一个专门为iOS和OS X开发者提供的深入讨论技术的平台,文章含金量很 ...

  3. MYSQL进阶学习笔记七:MySQL触发器的创建,应用及管理!(视频序号:进阶_16,17)

    知识点八:MySQL触发器的应用(16,17) 触发器的定义: 什么是触发器: 触发器是一种特殊的存储过程,它在插入,删除或修改特定表中的数据是触发执行,他比数据库本身标准的功能有更精细和更复杂的数据 ...

  4. JQuery验证成功之后,使用ajax提交数据

    function checkForm(){ validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID error ...

  5. 相对定位relative与绝对定位absolute

    relative:相对定位,并没有脱离原来文档流,依然在原来的位置上,可以通过设置left,top,来设置自己的偏移量,但是它依然占据自己原来的位置,偏移的位置会遮盖其他的元素 absolute:绝对 ...

  6. 在idea中创建maven父子工程,子工程无法导入父工程依赖的问题

    创建maven父子工程时遇到一个问题,当子工程的名称前缀和父工程的名称一样时,子工程会出现一系列的问题.比如我的父工程名称是microservicecloud,子工程名称是microservicecl ...

  7. Get与Post的小知识

    Get与Post的小知识 一.传递参数: Get把参数包含在URL中,而在Post通过request body传递参数.因为参数直接暴露在URL上,GET比POST更不安全,所以不能用来传递敏感信息. ...

  8. SCUT - 254 - 欧洲爆破 - 概率dp - 状压dp

    https://scut.online/p/254 思路很清晰,写起来很恶心. #include<bits/stdc++.h> using namespace std; #define l ...

  9. 洛谷 - P1115 - 最大子段和 - 简单dp

    https://www.luogu.org/problemnew/show/P1115 简单到不想说……dp[i]表示以i为结尾的最大连续和的值. 那么答案肯定就是最大值了.求一次max就可以了. 仔 ...

  10. Codeforces731F Video Cards

    考虑每个数在最大值内的倍数都求出来大概只有max(ai)ln(max(ai))个. 先排个序,然后对于每个数ai,考虑哪些数字可以变成ai*k. 显然就是区间[ai*k,ai*(k+1))内的数,这个 ...