微信小程序设置底部导航栏

时间：2021-06-03 18:28:45 收藏：0 阅读：0

一、概述

微信小程序底部想要有一个漂亮的导航栏目，不知道怎么制作，于是百度找到了本篇文章，分享给大家。

好了小程序的头部标题设置好了，我们来说说底部导航栏是如何实现的。

我们先来看个效果图

技术图片

这里，我们添加了三个导航图标，因为我们有三个页面，微信小程序最多能加5个。

那他们是怎么出现怎么着色的呢？两步就搞定！

二、图标准备

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

我们进入该网站，鼠标滑到一个喜欢的图标上面点击下方的下载按钮

比如首页，指定颜色代码：#272636，选择64px大小，下载png文件

技术图片

其他图标也是一样的操作。

三、小程序开发

新建小程序 miniprogram-2

技术图片

在项目根目录创建images文件夹，将3个png文件放进去。

技术图片

在pages文件夹下，创建2个目录，分别是addressBook，sms。

打开微信开发者工具，鼠标移到addressBook文件夹，右键-->新建 Page，输入名字：addressBook

它会生成4种不同后缀的文件，分别是js，json，wxml，wxss。

sms也是同样的操作，创建4个文件。完成之后，整个项目目录结构如下：

./
├── app.js
├── app.json
├── app.wxss
├── images
│   ├── home.png
│   ├── mail_list.png
│   └── short_message.png
├── pages
│   ├── addressBook
│   │   ├── addressBook.js
│   │   ├── addressBook.json
│   │   ├── addressBook.wxml
│   │   └── addressBook.wxss
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   ├── logs
│   │   ├── logs.js
│   │   ├── logs.json
│   │   ├── logs.wxml
│   │   └── logs.wxss
│   └── sms
│       ├── sms.js
│       ├── sms.json
│       ├── sms.wxml
│       └── sms.wxss
├── project.config.json
├── sitemap.json
└── utils
    └── util.js

修改app.json，增加tabBar，pages增加跳转页面。

完整代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/addressBook/addressBook",
    "pages/sms/sms"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#FFF"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color": "#999",
        "selectedColor": "#3D98FF",
        "backgroundColor": "#fff",
        "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/home.png",
        "iconPath": "images/home.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/addressBook.png",
        "iconPath": "images/addressBook.png",
        "pagePath": "pages/addressBook/addressBook",
        "text": "通讯录"
      },
      {
        "selectedIconPath": "images/sms.png",
        "iconPath": "images/sms.png",
        "pagePath": "pages/sms/sms",
        "text": "短信"
      }
    ]
  }
}

View Code

解释一下对应的属性信息

tabBar 指底部的导航配置属性

color 未选择时底部导航文字的颜色

selectedColor 选择时底部导航文字的颜色

backgroundColor 底部背景颜色

borderStyle 底部导航边框的样色（注意这里如果没有写入样式会导致导航框上边框会出现默认的浅灰色线条）

list 导航配置数组

selectedIconPath 选中时图标路径

iconPath 未选择时图标路径

pagePath 页面访问地址

text 导航图标下方文字

如果要改变更详细的样式请参看

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

修改app.wxss，设置背景颜色和文字。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
page{
  background: rgba(250,250,250,1);
  font-family:PingFangSC-Regular,PingFang SC;
}

修改pages/addressBook/addressBook.wxml

<view>
  <text class="title">这是通讯录</text>
</view>

修改pages/sms/sms.wxml

<view>
  <text class="title">这是短信</text>
</view>

运行小程序，效果如下：

技术图片

本文参考链接：

https://blog.csdn.net/weixin_43077063/article/details/82117190