android中实现微信九宫格,微信小程序九宫格布局
先上效果图
使用注意事项
1:注意在app.json中注册页面路径
2:如果要增加新的item,可到js中对listservice数组进行增加
3:listservice参数[
title:分类标题
items:这个分类下的所有item[
name:这个item的名字
url:这个item点击跳转路径
]]
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,
})
},
})
android中实现微信九宫格,微信小程序九宫格布局相关推荐
- 微信小程序九宫格图的排版----注意层次排版(层次最重要)
微信小程序九宫格图的排版----注意层次排版(层次最重要) 1.wxml中的代码(图片和数据都是网页获取来的,详细下看) 2.排版 3.使用.js文件进行事件加载 | | | |
- 关于微信小程序上传,在微信公众平台|小程序中找不到上传的代码
2019/05/16 小程序小白入门 最开始的时候,我不知道该如何上传自己的代码.打开微信开发平台,找到"工具"选项,再点击"上传"就好了 ①找到"工 ...
- Android企业微信分享到小程序
1.官方文档 Android应用 - 接口文档 - 企业微信开发者中心https://developer.work.weixin.qq.com/document/path/91196 2.创建应用 登 ...
- Spring Boot中的微信支付(小程序)
前言 微信支付是企业级项目中经常使用到的功能,作为后端开发人员,完整地掌握该技术是十分有必要的. 一.申请流程和步骤 图1-1 注册微信支付账号 获取微信小程序APPID 获取微信商家的商户ID 获取 ...
- android学成语小程序,微信成语学院小程序
微信成语学院小程序是一款能够帮助玩家们学习更多的成语知识的小游戏,以轻松趣味的文字填空模式,向玩家们展现中华上下五千年来丰富的成语文化,使用不同组合的方式来考验大家的成语知识,打造最舒适畅快的成语学习 ...
- 仿 微信/QQ 实现小程序功能 -IOS
仿 微信/QQ 实现小程序功能 -IOS 1. 需求 首先,来大致看一下 微信/QQ 小程序的功能. Android端: 点击图标进入小程序,会新开一个任务栈,每个小程序一个任务栈(有的机型所有小程序 ...
- 【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现
基于APP的微信点餐小程序的设计与实现 摘 要 本文介绍了一种基于APP的微信点餐小程序的设计与实现方法.该系统利用微信公众号作为用户入口,用户可以通过微信扫码进入点餐系统,选择菜品.下单.支付等操作 ...
- 微信推出适用小程序编辑器_适用于Windows的最佳免费视频编辑应用程序
微信推出适用小程序编辑器 With smartphone cameras becoming better every day, the gear you use to make videos is b ...
- 微信限制 ChatGPT 小程序;美国禁止在政府设备上使用 TikTok;Gccrs 代码合并到 GCC 13 主支|极客头条
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹 出品 | CSDN(ID:CSDNnews ...
- vue plus.webview 实现 类似微信右上角 关闭小程序
vue plus.webview 实现 类似微信右上角 关闭小程序 用过微信的人相信都知道 (左图) 我实现的效果(右图) 大概总结了下, 一共有两种方案, 方案一: 保留 plus.webv ...
最新文章
- Spring事务异常回滚,捕获异常不抛出就不会回滚
- 删除矩阵中的任意一列元素
- 张旭升20162329 2006-2007-2 《Java程序设计》第一周学习总结
- iptables 手册
- c语言fopen_s的用法,fopen和fopen_s用法的比较
- django获取ip与数据重复性判定
- MySQL 异常有这一篇就够了!
- H3C实验室Vlan的简单运用
- 技术开发者应该如何构建小团队的微服务方案?
- 【算法与数据结构】哈希表-链地址法
- svm对未知数据的分类_SVM多分类之一对一与一对多
- c语言作业做出金山打字功能,C语言制作简易金山打字通功能的代码
- 求职必看~10分钟读懂国企、事业单位和公务员的区别
- centos7.9编译安装构建系统gn+ninja
- 斯坦福大学已经训练好的词向量模型下载网址
- 【Linux】学习笔记1
- 电脑辐射对身体有多大危害
- LAMP兄弟连-招募PHP技术讲师
- STM32跳入HardFault Handler中断分析
- 对脏写、脏读、不可重复度、幻读的理解笔记
热门文章
- AW笔记本升级SSD,外接双屏中的一些注意事项
- 病毒RNA提取:EpiQuik 病毒RNA提取纯化试剂盒方案
- 计算机网络(三)—— 数据链路层(7):MAC地址、IP地址以及数据链路层使用的ARP协议
- 词袋模型 matlab,【火炉炼AI】机器学习051-视觉词袋模型+极端随机森林建立图像分类器...
- 使用uniapp编写词霸每日一句页面
- 记录docker failed to initialize docker desktop is shutting down解决办法
- 10. ESP8266通过OTA更新固件的实践
- Excel 甘特图 一行公式 极简版
- min-width、max-width属性中min-content、max-content的含义,css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值
- 腾讯游戏DBA团队的发展自白