微信小程序之底部导航栏（新手小白也可以轻松拿捏）

置顶王百万啊

已于 2023-11-28 15:34:58 修改

阅读量1.8k

点赞数 14

文章标签：微信小程序微信开放平台

于 2023-11-28 15:34:17 首次发布

本文链接：https://blog.csdn.net/biubiubiu_123/article/details/134665620

版权

微信小程序之底部导航栏

新手小白如何快速上手微信小程序开发？

这篇文章教你如何从0到1学会编写简单小程序，不需要会代码也可以轻松做自己想要的小程序！

底部导航栏

创建好项目后 ，进入小程序的目录是下面这样的；
找到app.json这个文件
在 app.json 文件中编写以下代码

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
   "color": "#a9b7b7",
   "selectedColor": "#11cd6e",
   "borderStyle": "black" ,
   "list": [{
     "pagePath": "pages/index/index",
     "text": "首页"
   }, {
     "pagePath": "pages/logs/logs",
     "text": "XX"
   },{
     "pagePath": "pages/mine/mine",
     "text": "我的"
   }
   ]
 }
}

pages 【页面路径列表】里包含了底部导航栏中涉及到的页面，如果文件夹中没有会自动创建；
window【全局的默认窗口】里包含语法的含义如下：微信小程序页面配置详情
backgroundTextStyle：页面容器背景色点击查看设置背景色详情
navigationBarBackgroundColor：导航栏背景颜色，如 #000000
navigationBarTitleText：导航栏标题文字内容
navigationBarTextStyle：导航栏标题、状态栏颜色，仅支持 black / white
tabBar【底部 tab 栏】里包含语法的含义如下：
color：tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor：tab 上的文字默认颜色，仅支持十六进制颜色
borderStyle：tab 上的文字默认颜色，仅支持十六进制颜色
List【tab 的列表】最少 2 个、最多 5 个 tab
List属性值详细介绍
pagePath：页面路径，必须在 pages 中先定义
text：tab 上按钮文字
最后的效果图就是这样的啦！也可以在页面上增加图标，在上面的链接里可以找到属性值并把图片路径写进去就可以啦！