第三章: 微信小程序底部导航栏的实现(详细)

最新推荐文章于 2024-08-07 22:38:02 发布

程序猫A建仔

最新推荐文章于 2024-08-07 22:38:02 发布

阅读量3.4k

点赞数 5

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_44504146/article/details/98051240

版权

微信小程序专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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

一. 下载图标

给大家推荐一个网站: Iconfont-阿里巴巴矢量图标库
网址: http://www.iconfont.cn/collections/show/29
在这里插入图片描述

下载自己需要用到的图标, 例如首页 , 搜索 ,用户头像等一些常用的图标，点击下载保存到本地就可以啦

二.新建images文件

在项目目录中新建一个images文件夹，把下载好的图标放在文件夹里面，命名保存
在这里插入图片描述

三.添加配置文件

在项目中找到配置文件 app.json , 并加入如下配置信息:

 "tabBar": {
      "color": "#a9b7b7",
      "selectedColor": "#11cd6e",
      "borderStyle": "white",
      "list": [
        {
          "selectedIconPath": "images/首页.png",
          "iconPath": "images/首页.png",
          "pagePath": "pages/index/index",
          "text": "首页"
        },
        {
          "selectedIconPath": "images/群组.png",
          "iconPath": "images/群组.png",
          "pagePath": "pages/logs/logs",
          "text": "日志"
        },
        {
          "selectedIconPath": "images/信封.png",
          "iconPath": "images/信封.png",
          "pagePath": "pages/test/test",
          "text": "测试"
        }
      ]
    },

app.json解释:

主要用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
在这里插入图片描述

OK，编译, 我们可以看到底部导航效果完美实现~
在这里插入图片描述

小程序的官方文档参考文档：(提供了更多的丰富的组件和样式)
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
在这里给大家提供一份微信小程序源码,大家可以克隆到本地
GitHub: https://github.com/yuanqingjian/myproject
在这里插入图片描述
您的鼓励就是我最大的创作动力！
如果大家觉得这篇博客不错的话,请多多点赞支持哦!
作者: 程序猫A建仔
QQ: 651405985
博客:https://blog.csdn.net/weixin_44504146