微信小程序怎么实现九宫格效果
发表于:2023-02-02 作者:安全数据网编辑
编辑最后更新 2023年02月02日,今天小编给大家分享一下微信小程序怎么实现九宫格效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来
今天小编给大家分享一下微信小程序怎么实现九宫格效果的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
1.九宫格实现示例图:
Tips: 说明:
使用 display: -webkit-flex;
对布局做兼容。
保证每排三个图标的两对对齐,采用:justify-content: space-between;
属性。
父元素必须设置 flex-wrap: wrap;
属性进行换行,否则会在一排展示。
个子元素的宽度width: 33.33333333%;
按照其占位大小分配。
使用justify-content:center;
属性设置元素居中。
使用flex-direction: column;
和flex-wrap: wrap;
属性设置icon
和text
元素竖直排列。
2.在 .js文件中定义数据源:
Page({ /** * 页面数据源 */ data: { iconColor: [ "red", "orange", "yellow", "green", "rgb(0,255,255)", "blue", "purple" ], iconStyle: [ { "type":"success", "size":30, "color":"#32CD32" }, { "type": "success_no_circle", "size": 30, "color": "orange" }, { "type": "info", "size": 30, "color": "yellow" }, { "type": "warn", "size": 30, "color": "green" }, { "type": "waiting", "size": 30, "color": "rgb(0,255,255)" }, { "type": "cancel", "size": 30, "color": "blue" }, { "type": "download", "size": 30, "color": "purple" }, { "type": "search", "size": 30, "color": "#C4C4C4" }, { "type": "clear", "size": 30, "color": "red" } ] }})
3.在 .wxss文件中定义样式如下:
/* 九宫格容器布局样式 */.grid-item-container { display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1rpx solid #D9D9D9;}/* item容器样式*/.grid-item-child { display:flex; display: -webkit-flex; justify-content:center; flex-direction: column; flex-wrap: wrap; float: left; width: 33.33333333%; height: 200rpx; box-sizing: border-box; background-color: #FFFFFF; border-right: 1rpx solid #D9D9D9; border-bottom: 1rpx solid #D9D9D9;}/* icon样式*/.grid-item-icon { display:flex; display: -webkit-flex; justify-content:center;}/* 文本样式*/.grid-item-label { display:flex; display: -webkit-flex; justify-content:center; color: #666; font-size: 14px;}
4.在 .wxml文件中具体使用:
{{item.type}}
以上就是"微信小程序怎么实现九宫格效果"这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注行业资讯频道。
c语言网络技术和编程语言总结
c语言对应的三级考试网络技术
网站服务器后台如何加防护密码
c语言软件开发步骤
c语言中网络技术知识点
服务器对权限提升的防护措施
怎么在阿里云租服务器
黑苹果能做web服务器吗
c语言和网络技术哪个好考
云服务器2核4G是什么性能
福建警院网络安全监察
服务器如何做安全策略
4月29日是网络安全日吗
cepii数据库官网
上海要邀网络技术有限公司
数据库添加属性列并建立主键
第五人格能换服务器吗
华为云服务器登录怎么是
数据库db什么意思
网络安全应急标准体系
百计网络技术有限公司
数据库状态字段需要建立索引吗
徐冬兴网络安全
项目数据库怎么设置
cfg下载数据库
软件开发过程目标
软件开发谈心
用什么软件开发app最轻松
数据库能打开吗
北京通鑫互联网科技中心
战意国际服为什么连不上服务器
同方服务器在内蒙
岳阳软件开发培训排行榜
奥度互联网科技
深圳一流网络技术
资源管理器是哪个服务器
家里安装一个服务器会影响网速吗
小学网络安全日主题
雄霸天下为什么不能连接服务器
游戏机上的我的世界如何进服务器