微信小程序底部导航栏tabBar及不显示问题解决记录

1，首先需要新建一个目录images来保存相关导航图标，如下图：

2，在app.json文件中对tabBar进行配置（注意字母大小写不要写错，图片路径不要写错）

"tabBar": {"color": "#a9b7b7","selectedColor": "#11cd6e","borderStyle": "white","list": [{"selectedIconPath": "images/test_hall.png","iconPath": "images/test_hall.png","pagePath": "pages/index/index","text": "商城"},{"selectedIconPath": "images/test_shoplist.png","iconPath": "images/test_shoplist.png","pagePath": "pages/databaseGuide/databaseGuide","text": "清单"},{"selectedIconPath": "images/test_user.png","iconPath": "images/test_user.png","pagePath": "pages/deployFunctions/deployFunctions","text": "用户"}]}

3，配置好以后我遇到了不显示图标的问题，造成问题的原因是app.json中pages的页面路径中的第一个路径不是tabBar配置中list[0]的第一个页面路径，所以这里最简单的方法就是把它们改成一致。

我只遇到这个问题，所以这样配置好代码以后就正常显示底部导航了，如下：

微信小程序底部导航栏tabBar及不显示问题解决记录相关推荐

小程序底部导航栏(tabBar)图标的正确做法
许多人都认为小程序系统的底部导航栏特别不好看,为了美观而选择自定义,从此身陷漩涡无法自拔.其实真正的原因是图标的图片处理不当(说白了就是前端和设计太菜了),导致会有线条变粗,间距不当的视觉感受. 除小 ...
微信小程序-底部导航栏
注册一个小程序appId,新建自己的项目,了解小程序的框架结构. 制作底部导航栏时,添加导航按钮关联页面,注意配置在app.json配置page时,要把第一个导航按钮页面放在第一个位,不然其他页面会覆 ...
自定义微信小程序底部导航栏
效果目录 1.在根目录创建custom-tab-bar文件夹 (1)index.js Component({data: {selected: 0,color: "#59595b" ...
微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
小程序tabbar能放分包路径吗_微信小程序底部导航Tabbar
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
php底部导航栏,关于微信小程序底部导航栏目的开发
这篇文章主要介绍了微信小程序底部导航栏目开发资料的相关资料,微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家,需要的朋友可以参考下微信小程序底部导航栏目 ...
微信小程序底部导航---tabBar
微信小程序底部导航-tabBar 示例图如下: 在app,json页面pages配置中代码如下: "pages": ["pages/home/home",&q ...
小程序底部导航栏配置以及自定义导航栏
小程序底部导航栏可在根目录下的 app.json 文件进行全局配置,但是部分情况下需要我们自己进行自定义. ** 一 :在app.json 文件进行全局配置** {"pages": ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...

微信小程序底部导航栏tabBar及不显示问题解决记录

微信小程序底部导航栏tabBar及不显示问题解决记录相关推荐

最新文章

热门文章