小程序排行榜2020-微信小程序|宫格导航设计-小程序排名-即速应用

小程序排行榜2020-微信小程序|宫格导航设计-小程序排名

浏览量：1837 时间：2020-03-20 来源：算法与编程之美

1.欢迎点击「算法与编程之美」↑关注我们！
2.本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
3.问题描述
4.在很多APP软件，都会设置宫格导航，那么是如何设计的呢？
5.首先要熟悉小程序的开发流程：在js里提供数据，在wxml里绑定数据，在wxss里添加样式。
6.解决方案
7.在wxml:
8.view
9.
10.view
11.view
12.viewimagesrc="/pages/images/菜谱分类.png"style="width:25px;height:23px;"/image/view
13.view菜谱分类/view
14./view
15.
16.view
17.viewimagesrc="/pages/images/视频.png"style="width:25px;height:23px;"/image/view
18.view视频/view
19./view
20.
21.view
22.viewimagesrc="/pages/images/美食养生.png"style="width:25px;height:23px;"/image/view
23.view美食养生/view
24./view
25.
26.view
27.viewimagesrc="/pages/images/闪购.png"style="width:25px;height:23px;"/image/view
28.view闪购/view
29./view
30./view
31.view/view
32./view
33.在wxss:
34..nav{
35.display:flex;
36.flex-direction:row;
37.text-align:center;
38.}
39..nav-item{
40.width:25%;
41.margin-top:20px;
42.font-size:12px;
43.}
44..hr{
45.height:15px;
46.background-color:#cccccc;
47.margin-top:15px;
48.opacity:0.2;
49.}
50.在js:
51.Page({
52.data:{
53.array:[]
54.},
55.最终效果图：
图3.1宫格导航效果图
56.结语
57.很多APP都会使用宫格导航来进行界面布局，效果图中仅仅体现了宫格导航的形式，其实在宫格导航上方还可以加入图片轮播，会达到更棒的效果。
58.END
实习主编|王楠岚
责编|赵微
59.where2go团队
60.
61.微信号：算法与编程之美
62.
63.长按识别二维码关注我们!
64.温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！