微信小程序 宫格导航设计

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

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

问题描述

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

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

解决方案

在wxml:

在wxss:

在js:

最终效果图：

图3.1宫格导航效果图

结语

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

END

实习主编 | 王楠岚

责 编 | 赵 微