专栏首页算法与编程之美微信小程序|宫格导航设计

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

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都会使用宫格导航来进行界面布局,效果图中仅仅体现了宫格导航的形式,其实在宫格导航上方还可以加入图片轮播,会达到更棒的效果。

实习主编 | 王楠岚

责 编 | 赵 微

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:赵微

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|scroll-view组件

    小程序的视图容器组件分为五个组件,分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件,如图2.1。这里介绍sc...

    算法与编程之美
  • 微信小程序|自定义折叠面板

    在小程序页面中,一个可点开、关闭的折叠面板,并且能在点开面板中任意添加不同的内容,需要了解到不同组件的用法、事件绑定的方法以及条件渲染的方法。

    算法与编程之美
  • 微信小程序|下拉菜单

    下拉菜单在各类网页,app或者小程序中都是比较常见的输入控件。下拉菜单的下拉选项的多少可以根据自身需求进行调节,常运用于时间范围选择,地点区域选择,价格区间选择...

    算法与编程之美
  • View官方文档

    nimomeng
  • 小程序url传参如何写变量

    蓓蕾心晴
  • Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)

    Android中View研究自学之路 http://blog.csdn.net/zrf1335348191/article/details/54171263 ...

    fanfan
  • 小程序组件开发 -- 疫情动态

    之前有很多疫情相关的项目涌现,本弱鸡的作品至今只有一点点star,本着骗star的原则,把一个比较常用的功能组件进行封装,方便各位小程序开发者使用,组件代码放在...

    Kindear
  • Android "巧"仿蚂蚁森林水滴动效

    本文重在思路和性能,就不介绍自定义view和handler避免内存泄漏或是导致空指针这些了,喜欢请clone项目并star、fork一下,感谢各位。

    CCCruch
  • Android中View研究自学之路

    写这篇博客呢是在研究了view将近一个月之后,算是对自己的学习做一个总结,进而反思一下学习方法,本博文不涉及代码分析。

    fanfan
  • 前端-微信小程序开发(2):小程序基本介绍

    前面我们研究了下微信小程序的执行流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解小程序还需要做具体的项目,于是我们将原来那套还算复杂的业务拿出来:

    grain先森

扫码关注云+社区

领取腾讯云代金券