微信小程序中底部导航栏的实现代码

发布日期： 2018-08-16 阅读量： 作者： 网络

本篇文章给大家带来的内容是关于微信小程序中底部导航栏的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

底部导航栏是如何实现？即点击底部的导航，会实现不同对应页面之间的切换。

我们先来看个我们要实现的底部导航栏的效果图：（三个导航图标示例，微信小程序最多能加5个）

1. 图标准备

阿里图标库 http://www.iconfont.cn/collections/show/29

在这个网站上下载一些自己要用到的图标，比如人员头像，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": "测试"
    }
  ]
}

# 微信小程序

上一篇: WordPress中文内容显示乱码？从根源解决问题

下一篇: 优化WordPress网站，消除乱码困扰

微信小程序中底部导航栏的实现代码

随便看看