当前位置: 首页 > Web前端 > HTML

微信小程序开发中tabbar页面显示的相关问题及解决方法

时间:2023-04-02 12:24:38 HTML

如果你在微信小程序开发中使用过tabbar,相信你会遇到一些问题。为什么有时候代码明明在app.json里加了tabbar,页面上却显示不出来?能否有的页面显示tabbar,有的页面不显示tabbar?今天整理一下自己在开发过程中遇到的问题,分享给大家。问题一:为什么页面底部不显示tabbar?很多网友(包括我自己)也遇到过这种问题。app.json中明显添加了tabbar,list中也添加了路径。为什么不显示?例如,在下面的代码中,为什么标签栏没有按预期出现在屏幕底部?{"pages":["pages/clickDemo/clickDemo","pages/logs/logs","pages/index/index","pages/mypage/mypage"],"window":{"backgroundTextStyle":"dark","navigationBarBackgroundColor":"#ddd","navigationBarTitleText":"TabbarDemo","navigationBarTextStyle":"black","backgroundColor":"#ff0000"},"tabBar":{"color":"#000000","borderStyle":"#000","selectedColor":"#9999FF","list":[{"pagePath":"pages/index/index","text":"Home","iconPath":"image/location_normal.png","selectedIconPath":"image/location_selected.png"},{"pagePath":"pages/logs/logs","text":"settings","iconPath":"image/setting_normal".png","selectedIconPath":"image/setting_selecred.png"}]}}我们来看看页面的显示结果如下:原因是:pages数组的第一项必须是的list数组标签栏我们可以看一下上面代码中pages数组的内容:"]tabbar中list数组的内容为:"list":[{"pagePath":"pages/index/index","text":"Homepage","iconPath":"image/location_normal.png","selectedIconPath":"image/location_selected.png"},{"pagePath":"pages/logs/logs","text":"settings","iconPath":"image/setting_normal.png","selectedIconPath":"image/setting_selecred.png"}你发现为什么TabBar没有出现在底部了吗?原因是app.json的header中pages数组中的第一项“pages/clickDemo/clickDemo”不是tabBar的成员,即在标签栏。【解决方法】1、我们在list数组中添加链接clickDemo页面的入口,代码如下。{"pagePath":"pages/clickDemo/clickDemo","text":"EventDemo","iconPath":"image/setting_normal.png","selectedIconPath":"image/setting_selectred.png"}效果如下如下:方法2.将pages数组的第一项设置为“pages/index/index”,或设置为“pages/logs/logs”。当然,这种方式并不是我们期望看到的。经过实践,发现app.json中pages数组中的第一项(主页)必须出现在tabBar---list数组中,list中的个数无所谓;但是如果首页不在列表中,当然是无法渲染的,这是可以理解为app.json是第一个页面配置问题2:有什么办法可以让tabbar不显示在首页小程序而不是在主页上显示标签栏?这个暂时还没有想到解决办法,欢迎大家帮忙回答问题3:有些页面没有在tabbar的列表页中,为什么tabbar显示在页面底部?如果从一级页面redirectTo到其他页面,会发现即使其他页面不在TabBar定义的列表中,也会显示TabBar。如何解决?【解决】如果当前页面也是一级页面,而你要跳转的页面没有Tabbar,不要用redirectTo,用navigateTo。其他关于tabbar开发的问题可以参考微信小程序开发教程:http://bbs.html51.com/f-37-1/:1、教你:如何在微信小程序中切换tabbar(带源码)2.微信小程序开发中底部导航栏tabbar的使用