微信小程序|宫格导航设计
Page({
data: {
array: []
},问题描述
在很多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都会使用宫格导航来进行界面布局，效果图中仅仅体现了宫格导航的形式，其实在宫格导航上方还可以加入图片轮播，会达到更棒的效果。
实习主编 | 王楠岚
责 编 | 赵 微