一、概述

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

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

我们先来看个效果图

这里，我们添加了三个导航图标，因为我们有三个页面，微信小程序最多能加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

微信小程序设置底部导航栏相关推荐

微信小程序在底部导航栏使用扫一扫功能【代码可用】
微信小程序在底部导航栏使用扫一扫功能解决方案 uni-app 微信原生代码在家躺着也能遇到奇奇怪怪的需求,这不,需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮(￣﹏￣)╭⭐. 解决方案在导航 ...
微信小程序设置底部导航栏目方法
微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了小程序的头部标题设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图这里,我们添加了 ...
微信小程序添加底部导航栏
我们平时上微信可以看到,微信的底部是4个导航栏选项进行切换的,我们自己开发小程序时,如果要添加像微信那样的底部导航栏的话,其实实现方式非常简单,便捷. 在微信小程序开发IDE中,我们新建一个小程序项目 ...
微信小程序实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...
一.app.json配置这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
你会微信小程序自定义底部导航栏吗？
一. 在目录下创建文件如下图: tabbar.js: // pages/tabbar/tabbar.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...

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

一、概述

二、图标准备

三、小程序开发

微信小程序设置底部导航栏相关推荐

最新文章

热门文章