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

问题描述

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

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

解决方案

在wxml:

<view> <view> <view> <view> <image src="/pages/images/菜谱分类.png" style="width:25px;height:23px;"></image></view>  <view>菜谱分类</view>  </view>  <view>  <view>  <image src="/pages/images/视频.png"  style="width:25px;height:23px;"></image></view>  <view>视频</view>  </view>  <view>  <view>  <image src="/pages/images/美食养生.png"  style="width:25px;height:23px;"></image></view>  <view>美食养生</view>  </view>  <view>    <view>  <image src="/pages/images/闪购.png"  style="width:25px;height:23px;"></image></view>       <view>闪购</view>    </view>    </view>    <view></view>   </view>

在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 团队

---

微信号：算法与编程之美