微信小程序底部导航栏实现

╰半夏微凉° 2022-12-09 02:37 254阅读 0赞

上一章节，我们分享了如何创建一个新的页面和设置页面的标题，这一章我们来聊聊**底部导航栏**是如何实现的。即点击底部的导航，会实现不同对应页面之间的切换。

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

## 1. 图标准备 ##

阿里图标库 [http://www.iconfont.cn/collections/show/29][http_www.iconfont.cn_collections_show_29]

在这个网站上下载一些自己要用到的图标，比如人员头像，home主页等一些常用的图标，直接点击下载保存到本地，修改一下命名。也可以使用UI准备好的图标。

![图片.png][.png 1]

回到项目里，新建一个images文件夹，将刚刚下载好的图标放在文件夹底下备用，将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中，准备工作就做好了。  
![图片.png][.png 2]

![图片.png][.png 3]

## 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": "测试"
        }
      ]
    }

![图片.png][.png 4]

以上只是基础的部分，当然了小程序的官方文档提供了更多的丰富的组件和样式  
参考文档：  
[https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html\#tabBar][https_mp.weixin.qq.com_debug_wxadoc_dev_framework_config.html_tabBar]

OK，结束，保存 编译 就可以实现小程序的经典的底部导航效果了

github:https://github.com/wangxiaoting666/myproject

==============  
附录：一份完整代码（可忽略不计）  
![图片.png][.png 5]

{
      "pages":[
            "pages/index/index",
            "pages/category/category",
            "pages/topic/topic",        
            "pages/user/user",
            "pages/logs/logs"
      ],
      "window":{
            "backgroundTextStyle":"light",
            "navigationBarBackgroundColor": "#000",
            "navigationBarTitleText": "WeiCMS",
            "navigationBarTextStyle":"white"
      },
      "tabBar": {
        "color": "#8c8c8c",
        "selectedColor": "#f4645f",
        "backgroundColor": "white",
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath":"images/48.png",
          "selectedIconPath":"images/48.png"
        }, 
        {
          "pagePath": "pages/category/category",      
          "text": "分类",
          "iconPath":"images/48.png",
          "selectedIconPath":"images/48.png"
        },
        {
          "pagePath": "pages/topic/topic",      
          "text": "话题",
          "iconPath":"images/48.png",
          "selectedIconPath":"images/48.png"
        },
        {
          "pagePath": "pages/user/user",      
          "text": "我的",
          "iconPath":"images/48.png",
          "selectedIconPath":"images/48.png"
        }  
        ],
        "position": "bottom"
      }  
    }

下一章：微信小程序从零开始开发步骤（四）微信小程序页面自定义分享onShareAppMessage

#### 文末福利： ####

福利一：前端，Java，产品经理，微信小程序，Python等资源合集大放送：[https://www.jianshu.com/p/e8197d4d9880][https_www.jianshu.com_p_e8197d4d9880]  
福利二：微信小程序入门与实战全套详细视频教程

![image][]

文末彩蛋

扫码回复，" 2020 "，获得最新前端，后端，大数据，人工智能，PHP等视频教程资料云盘链接。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[.png]: /images/20221123/5ebce1cf05d94aa9a92a57c6153adf8d.png
[http_www.iconfont.cn_collections_show_29]: http://www.iconfont.cn/collections/show/29
[.png 1]: /images/20221123/a285e85c0c934c4799bbce40b8660d6a.png
[.png 2]: /images/20221123/de66b983368d42e49d96d27d9c2752df.png
[.png 3]: /images/20221123/7decb376fb214de2aa5832700c01bbfb.png
[.png 4]: /images/20221123/1c1bce079e494d2c97463a1d42b8d25b.png
[https_mp.weixin.qq.com_debug_wxadoc_dev_framework_config.html_tabBar]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
[.png 5]: /images/20221123/4fd882c36a364d3a94c3f8a003cab025.png
[https_www.jianshu.com_p_e8197d4d9880]: https://www.jianshu.com/p/e8197d4d9880
[image]: /images/20221123/ec5fde2410f74aca9a4c511ba90a9909.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/37077c50dd6042eaae0beb9745ae349b.png