【移动应用开发技术】微信小程序开发过程中tabbar页面显示问题的示例

【移动应用开发技术】微信小程序开发过程中tabbar页面显示问题的示例

这篇文章给大家分享的是有关微信小程序开发过程中tabbar页面显示问题的示例的内容。在下觉得挺实用的，因此分享给大家做个参考，一起跟随在下过来看看吧。问题1：为什么页面底部不显示tabbar？很多网友（包括我自己）也遇到过此类问题，在app.json里面明明加了tabbar，list里面也加了路径怎么就是不显示呢？举例，如下代码，为什么屏幕页面底部没有如期出现tabbar呢？{

"pages":[

"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",

"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"

}

]

}

}我们看一下页面的显示结果如下：原因是：pages数组的第一项必须是tabBar的list数组的一员。我们可以看看上面代码中的pages数组的内容是："pages":[

"pages/clickDemo/clickDemo",

"pages/logs/logs",

"pages/index/index",

"pages/mypage/mypage"

]tabbar中list数组内容是："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数组中第一项（首页），必须在tabBarlist数组中出现，list中第几个无所谓；但如果首页不在list里面，当然无法渲染出来，这就可以理解app.json是首次页面配置了问题2：有没有什么办法让小程序首页不显示tabbar，而非首页显示tabbar？这个目前还没有想到解决办法，欢迎大家帮忙解答问题3：有些页面并不在tabbar的list页面里面，为什么页面底部也显示tabbar呢？如果从一级页面redirectTo到其他页面，会发现即使其他页面没有在TabBar定义的列表里也会显示TabBar，该如何解决？【解决办法】假如当前也是一级页面，到希望跳转到的页面不要有Tabbar时，不要使用redirectTo而是使用