微信小程序 — 九宫格

效果图如下：

网络上有几种作法，在此我采用了〝学而时习之〞所提供的做法。其作法很简单，就是将所有格子内容用 wx:for 逐一呈现，然后利用 css 控制格子大小，且宽度不足时会自动换行的特性，达到九宫格的显示效果。

在 menu.wxml 中布置如下代码：

  <view class="grids"><view class="grids-cell" wx:for="{{itemList}" wx:key="name"><navigator url="{{item.url}}"><view class="grids-cell-icon"><image src="{{item.pic}}" mode="scaleToFill" /></view><text class="grids-cell-label">{{item.name}}</text></navigator></view></view>

在 menu.js 中设置资料：

  data: {itemList:[{name: "语文",url: "../C1/index",pic:"../../images/icon/01.png"},{name: "数学",url: "../C2/index",pic: "../../images/icon/02.png"},{name: "英语",url: "../C3/index",pic: "../../images/icon/03.png"},{name: "历史",url: "../C4/index",pic: "../../images/icon/04.png"}      ]},

在menu.wxss设置样式：

.grids {position: relative;overflow: hidden;padding:10px;text-align:center;
}.grids-cell {position: relative;float: left;width: 30%;margin:5px;}.grids-cell-icon {display: block;width: 100%;height: 100%;text-align:center;margin-top: 5px;
}.grids-cell-icon image {width: 80px;height: 80px;
}.grids-cell-label {display: block;font-size:14px;text-align:center;
}

参考资料：

小程序开发系列(四)九宫格另一种实现
https://blog.csdn.net/xxdddail/article/details/70314211

微信小程序 — 九宫格相关推荐

微信小程序九宫格图的排版----注意层次排版（层次最重要）
微信小程序九宫格图的排版----注意层次排版(层次最重要) 1.wxml中的代码(图片和数据都是网页获取来的,详细下看) 2.排版 3.使用.js文件进行事件加载 | | | |
微信小程序九宫格预览+单张图片预览
我们废话不多说直接上效果图下面是代码  <image style="width:550rpx; height: 600rpx;" sr ...
【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）
上图话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机源码接下来展示的就是微信小程序中的九宫格抽奖说明适用范围抽奖逻辑只是原生JS,通过数据进行驱动,因此 ...
Django实现微信小程序九宫格切图后端（第九周学习记录）
第九周学习记录上周第八周确实没有发布我的学习记录,因为服务器的原因项目也一直延迟,好在周日老师的服务器批下来,小伙伴也开始了快乐windows服务器配置,我自然也不能闲着,这周开始赶进度一.小程序 ...
微信小程序九宫格抽奖
因公司需求要做一个小程序的九宫格抽奖,但是一块又没有合适的插件,于是到网上看到一个,还挺不错的. 效果图 1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴; 2.抽奖的ite ...
android中实现微信九宫格,微信小程序九宫格布局
先上效果图使用注意事项 1:注意在app.json中注册页面路径 2:如果要增加新的item,可到js中对listservice数组进行增加 3:listservice参数[ title:分类标题 ...
微信小程序九宫格布局
先上效果图使用注意事项 1:注意在app.json中注册页面路径 2:如果要增加新的Item,可到js中对listService数组进行增加 3:listService参数[ title:分类标题 ...
java小程序九宫格_微信小程序九宫格布局
先上效果图使用注意事项 1:注意在app.json中注册页面路径 2:如果要增加新的Item,可到js中对listService数组进行增加 3:listService参数[ title:分类标题 ...
微信小程序九宫格抽奖活动制作
首先安装npm包 npm install @lucky-canvas/mini@latest 然后构建 npm 微信开发者工具 -> 找到左上角点击 -> 工具点击 -> 构建 n ...

微信小程序 — 九宫格

微信小程序 — 九宫格相关推荐

最新文章

热门文章