在微信小程序的开发过程中如果有使用过tabbar的同学，我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar，可以页面中就是不显示呢？可不可以有些页面显示tabbar，而有些页面不显示tabbar呢？今天我把我在开发过程中遇到的问题整理出来跟大家分享。问题1：为什么页面底部不显示tabbar？很多网友（包括我自己）也遇到过此类问题，在app.json里面明明加了tabbar，list里面也加了路径怎么就是不显示呢？举例，如下代码，为什么屏幕页面底部没有如期出现tabbar呢？
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
"window": {
"backgroundTextStyle": "dark ",
"navigationBarBackgroundColor": "#ddd",
"navigationBarTitleText": "Tabbar Demo",
"navigationBarTextStyle": "black",
"backgroundColor": "#ff0000"
"tabBar": {
"color": "#000000",
"borderStyle": "#000",
"selectedColor": "#9999FF",
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
"pagePath": "pages/logs/logs",
"text": "设置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
我们看一下页面的显示结果如下：
原因是：pages数组的第一项必须是tabBar的list数组的一员。我们可以看看上面代码中的pages数组的内容是：
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
tabbar中list数组内容是：
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
"pagePath": "pages/logs/logs",
"text": "设置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
是不是发现为什么底部不出现TabBar？原因在于，app.json头部的pages数组的第一项"pages/clickDemo/clickDemo"没有成为tabBar的一员，也就是在tabBar的list数组内没有链接clickDemo页面的条目。
【解决办法】1.我们在list数组内加入链接clickDemo页面的条目，下面给出了这段代码。
"pagePath": "pages/clickDemo/clickDemo",
"text": "事件Demo",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
效果如下：
方法2.把pages数组的第一项设置为"pages/index/index"，或者设置为"pages/logs/logs"。当然这个方法并不是我们所期望看到的。经过实践发现：app.json中pages数组中第一项（首页），必须在tabBar---list数组中出现，list中第几个无所谓；但如果首页不在list里面，当然无法渲染出来，这就可以理解app.json是首次页面配置了
问题2：有没有什么办法让小程序首页不显示tabbar，而非首页显示tabbar？这个目前还没有想到解决办法，欢迎大家帮忙解答
问题3：有些页面并不在tabbar的list页面里面，为什么页面底部也显示tabbar呢？如果从一级页面 redirectTo到其他页面，会发现即使其他页面没有在 TabBar定义的列表里也会显示TabBar，该如何解决？
【解决办法】假如当前也是一级页面，到希望跳转到的页面不要有Tabbar时，不要使用 redirectTo而是使用 navigateTo就可以了。
其他关于tabbar开发相关的问题可以看 微信小程序开发教程：：1.2.
阅读(...) 评论()来热鸟！就热了！！分享
小程序学习笔记：HelloWorld，json配置项，视图容器
18:07 来源：就是热鸟-微信小程序市场商店 作者：热鸟小程序
扫描二维码随身看资讯
使用手机 二维码应用 扫描右侧二维码，您可以
1.在手机上细细品读~
2.分享给你的微信好友或朋友圈~
表羞涩嘛~喜欢就点我
分享吧~提高逼格：
热门小程序
剩余：0/999 有效日期：
剩余：0/21 有效日期：
剩余：0/100 有效日期：
剩余：0/5 有效日期：
剩余：0/1000 有效日期：
剩余：0/9999 有效日期：
剩余：0/88 有效日期：
剩余：0/98765 有效日期：
剩余：0/20 有效日期：
剩余：0/3 有效日期：
小程序组合
动起来-运动体育小程序推荐
医疗微信小程序组合tabbar 微信小程序 （三）tabBar底部导航详细介绍-JavaScript教程
当前位置：&>&&>& &
微信小程序 （三）tabBar底部导航详细介绍
tabbar 微信小程序 （三）tabBar底部导航详细介绍
|　来源:网络 | 关键字：
tabBar相对而言用的还是比较多的，但是用起来并没有难，在app.json中配置下tabBar即可，注意tabBar至少需要两个最多五个Item选项主要属性：对于tabBar整体属性设置：对于tab
tabBar相对而言用的还是比较多的，但是用起来并没有难，在app.json中配置下tabBar即可，注意tabBar至少需要两个最多五个Item选项主要属性：对于tabBar整体属性设置：对于tabBar中每个Item属性设置：下面是官网一张图对tabBar描述：app.json的配置相对就简单了：相关文章：hello WeApp icon组件Window text组件switch组件tabBar底部导航
progress组件action-sheet应用生命周期button组件 modal组件页面生命周期checkbox组件toast组件模块化详form组件详 loading 组件数据绑定input 组件 navigator 组件View组件 .cnker组件 audio 组件scroll-view组件 radio组件video组件swiper组件 slider组件 Image组件
网友评论仅供其表达个人看法，并不表明网易立场。tab 点击 TabBar 上的“更多”按钮时，会出现另外一条 ，显示 隐藏的 。可用于 Button control 控件 238万源代码下载-
&文件名称: tab
& & & & &&]
&&所属分类:
&&开发工具: Objective-C
&&文件大小: 75 KB
&&上传时间:
&&下载次数: 0
&&提 供 者:
&详细说明：点击 TabBar 上的“更多”按钮时，会出现另外一条TabBar，显示更多隐藏的按钮。可用于TabBar上按钮过多的情况。 -&quot More&quot
button, there will be another one on the TabBar TabBar click to show more hidden buttons. Can be used in case of excessive TabBar button.
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&switchTabBarDemo&&................\.DS_Store&&__MACOSX&&........\switchTabBarDemo&&........\................\._.DS_Store&&switchTabBarDemo\switchTabBarDemo&&................\................\.DS_Store&&__MACOSX\switchTabBarDemo\switchTabBarDemo&&........\................\................\._.DS_Store&&switchTabBarDemo\switchTabBarDemo\AppDelegate.h&&__MACOSX\switchTabBarDemo\switchTabBarDemo\._AppDelegate.h&&switchTabBarDemo\switchTabBarDemo\AppDelegate.m&&__MACOSX\switchTabBarDemo\switchTabBarDemo\._AppDelegate.m&&switchTabBarDemo\switchTabBarDemo\en.lproj&&................\................\........\InfoPlist.strings&&__MACOSX\switchTabBarDemo\switchTabBarDemo\en.lproj&&........\................\................\........\._InfoPlist.strings&&switchTabBarDemo\switchTabBarDemo\Images.xcassets&&................\................\...............\AppIcon.appiconset&&................\................\...............\..................\Contents.json&&__MACOSX\switchTabBarDemo\switchTabBarDemo\Images.xcassets&&........\................\................\...............\AppIcon.appiconset&&........\................\................\...............\..................\._Contents.json&&switchTabBarDemo\switchTabBarDemo\Images.xcassets\LaunchImage.launchimage&&................\................\...............\.......................\Contents.json&&__MACOSX\switchTabBarDemo\switchTabBarDemo\Images.xcassets\LaunchImage.launchimage&&........\................\................\...............\.......................\._Contents.json&&switchTabBarDemo\switchTabBarDemo\main.m&&__MACOSX\switchTabBarDemo\switchTabBarDemo\._main.m&&switchTabBarDemo\switchTabBarDemo\MainWindow.xib&&__MACOSX\switchTabBarDemo\switchTabBarDemo\._MainWindow.xib&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar&&................\................\............\.DS_Store&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar&&........\................\................\............\._.DS_Store&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\mainpage_bottombg@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._mainpage_bottombg@2x.png&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\SwitchTabBar.h&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._SwitchTabBar.h&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\SwitchTabBar.m&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._SwitchTabBar.m&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\SwitchTabBarController.h&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._SwitchTabBarController.h&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\SwitchTabBarController.m&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._SwitchTabBarController.m&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\tab_bar_1@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._tab_bar_1@2x.png&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\tab_bar_2@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._tab_bar_2@2x.png&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\tab_bar_3@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._tab_bar_3@2x.png&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\tab_bar_4@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._tab_bar_4@2x.png&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\tab_bar_5@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._tab_bar_5@2x.png&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\tab_bar_6@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._tab_bar_6@2x.png&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\tab_bar_7@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._tab_bar_7@2x.png&&switchTabBarDemo\switchTabBarDemo\SwitchTabBar\tab_bar_selected@2x.png&&__MACOSX\switchTabBarDemo\switchTabBarDemo\SwitchTabBar\._tab_bar_selected@2x.png&&........\................\................\._SwitchTabBar&&switchTabBarDemo\switchTabBarDemo\switchTabBarDemo-Info.plist&&................\................\switchTabBarDemo-Prefix.pch&&__MACOSX\switchTabBarDemo\switchTabBarDemo\._switchTabBarDemo-Prefix.pch&&switchTabBarDemo\switchTabBarDemo.xcodeproj&&................\..........................\project.pbxproj&&................\..........................\project.xcworkspace&&................\..........................\...................\contents.xcworkspacedata&&................\..........................\...................\xcuserdata&&................\..........................\...................\..........\rsaif.xcuserdatad&&................\..........................\...................\..........\.................\UserInterfaceState.xcuserstate&&................\..........................\xcuserdata&&................\..........................\..........\rsaif.xcuserdatad&&................\..........................\..........\.................\xcschemes&&................\..........................\..........\.................\.........\switchTabBarDemo.xcscheme&&................\..........................\..........\.................\.........\xcschememanagement.plist&&................\switchTabBarDemoTests&&................\.....................\en.lproj&&................\.....................\........\InfoPlist.strings&&__MACOSX\switchTabBarDemo\switchTabBarDemoTests&&........\................\.....................\en.lproj&&........\................\.....................\........\._InfoPlist.strings&&switchTabBarDemo\switchTabBarDemoTests\switchTabBarDemoTests-Info.plist&&................\.....................\switchTabBarDemoTests.m&&__MACOSX\switchTabBarDemo\switchTabBarDemoTests\._switchTabBarDemoTests.m
&输入关键字，在本站238万海量源码库中尽情搜索：微信小程序（3）
在微信小程序的开发过程中如果有使用过tabbar的同学，我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar，可以页面中就是不显示呢？可不可以有些页面显示tabbar，而有些页面不显示tabbar呢？今天我把我在开发过程中遇到的问题整理出来跟大家分享。
问题1：为什么页面底部不显示tabbar？
很多网友（包括我自己）也遇到过此类问题，在app.json里面明明加了tabbar，list里面也加了路径怎么就是不显示呢？举例，如下代码，为什么屏幕页面底部没有如期出现tabbar呢？
&pages/clickDemo/clickDemo&,
&pages/logs/logs&,
&pages/index/index&,
&pages/mypage/mypage&
&window&: {
&backgroundTextStyle&: &dark &,
&navigationBarBackgroundColor&: &#ddd&,
&navigationBarTitleText&: &Tabbar Demo&,
&navigationBarTextStyle&: &black&,
&backgroundColor&: &#ff0000&
&tabBar&: {
&color&: &#000000&,
&borderStyle&: &#000&,
&selectedColor&: &#9999FF&,
&pagePath&: &pages/index/index&,
&text&: &首页&,
&iconPath&: &image/location_normal.png&,
&selectedIconPath&: &image/location_selected.png&
&pagePath&: &pages/logs/logs&,
&text&: &设置&,
&iconPath&: &image/setting_normal.png&,
&selectedIconPath&: &image/setting_selecred.png&
我们看一下页面的显示结果如下：
原因是：pages数组的第一项必须是tabBar的list数组的一员。我们可以看看上面代码中的pages数组的内容是：
&pages/clickDemo/clickDemo&,
&pages/logs/logs&,
&pages/index/index&,
&pages/mypage/mypage&
tabbar中list数组内容是：
&pagePath&: &pages/index/index&,
&text&: &首页&,
&iconPath&: &image/location_normal.png&,
&selectedIconPath&: &image/location_selected.png&
&pagePath&: &pages/logs/logs&,
&text&: &设置&,
&iconPath&: &image/setting_normal.png&,
&selectedIconPath&: &image/setting_selecred.png&
是不是发现为什么底部不出现TabBar？原因在于，app.json头部的pages数组的第一项&pages/clickDemo/clickDemo&没有成为tabBar的一员，也就是在tabBar的list数组内没有链接clickDemo页面的条目。
【解决办法】1.我们在list数组内加入链接clickDemo页面的条目，下面给出了这段代码。
&pagePath&: &pages/clickDemo/clickDemo&,
&text&: &事件Demo&,
&iconPath&: &image/setting_normal.png&,
&selectedIconPath&: &image/setting_selecred.png&
效果如下：
方法2.把pages数组的第一项设置为&pages/index/index&，或者设置为&pages/logs/logs&。当然这个方法并不是我们所期望看到的。经过实践发现：app.json中pages数组中第一项（首页），必须在tabBar---list数组中出现，list中第几个无所谓；但如果首页不在list里面，当然无法渲染出来，这就可以理解app.json是首次页面配置了
问题2：有没有什么办法让小程序首页不显示tabbar，而非首页显示tabbar？
这个目前还没有想到解决办法，欢迎大家帮忙解答
问题3：有些页面并不在tabbar的list页面里面，为什么页面底部也显示tabbar呢？如果从一级页面 redirectTo到其他页面，会发现即使其他页面没有在 TabBar定义的列表里也会显示TabBar，该如何解决？
【解决办法】假如当前也是一级页面，到希望跳转到的页面不要有Tabbar时，不要使用 redirectTo而是使用 navigateTo就可以了。
其他关于tabbar开发相关的问题可以看 微信小程序开发教程：：
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：5876次
排名：千里之外
转载：10篇
(2)(3)(5)(2)(2)