微信小程序|宫格导航设计

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

在很多APP软件，都会设置宫格导航，那么是如何设计的呢？

首先要熟悉小程序的开发流程：在js里提供数据，在wxml里绑定数据，在wxss里添加样式。

解决方案

在wxml:

菜谱分类            视频            美食养生                  闪购

在wxss:

.nav{   display:  flex;   flex-direction:  row;   text-align:  center; } .nav-item{   width:  25%;   margin-top:  20px;   font-size:  12px; } .hr{   height:  15px;   background-color:  #cccccc;   margin-top:15px;   opacity:  0.2; }

在js:

Page({    data: {      array: []    },

最终效果图：

图3.1宫格导航效果图

结语

很多APP都会使用宫格导航来进行界面布局，效果图中仅仅体现了宫格导航的形式，其实在宫格导航上方还可以加入图片轮播，会达到更棒的效果。

END

实习主编   |   王楠岚

责       编   |   赵   微

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！