当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 霸界科技教你如何从零做微信小程序开发(三)

霸界科技教你如何从零做微信小程序开发(三)

2018-05-29 10:24 来源: 霸界科技

摘要:我们来聊聊微信小程序底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。 ...

期权保本理财
  上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊微信小程序底部导航栏是如何实现的。即点击底部的导航,会实现不同对应页面之间的切换。
 
  我们先来看个我们要实现的底部导航栏的效果图:(三个导航图标示例,微信小程序最多能加5个)
 
微信小程序从零开始开发步骤
 
  1. 图标准备
 
  在这个网站上下载一些自己要用到的图标,比如人员头像,home主页等一些常用的图标,直接点击下载保存到本地,修改一下命名。也可以使用UI准备好的图标。
 
微信小程序从零开始开发步骤
 
  回到项目里,新建一个images文件夹,将刚刚下载好的图标放在文件夹底下备用,将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了。
 
微信小程序从零开始开发步骤
微信小程序从零开始开发步骤
 
  2. 添加配置文件
 
  我们找到项目根目录中的配置文件 app.json 加入如下配置信息(app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。)
 
  "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "images/1.png", "iconPath": "images/2.png", "pagePath": "pages/index/index", "text": "首页" }, { "selectedIconPath": "images/1.png", "iconPath": "images/2.png", "pagePath": "pages/logs/logs", "text": "日志" }, { "selectedIconPath": "images/1.png", "iconPath": "images/2.png", "pagePath": "pages/test/test", "text": "测试" } ]}
 
 
微信小程序从零开始开发步骤
  OK,结束,保存 编译 就可以实现小程序的经典的底部导航效果了
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088