600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 详解微信小程序开发过程中tabbar页面显示问题的解决办法

详解微信小程序开发过程中tabbar页面显示问题的解决办法

时间:2020-03-31 07:37:40

相关推荐

详解微信小程序开发过程中tabbar页面显示问题的解决办法

微信小程序|小程序开发

微信小程序

微信小程序-小程序开发

在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示tabbar,而有些页面不显示tabbar呢?今天我把我在开发过程中遇到的问题整理出来跟大家分享。

问题1:为什么页面底部不显示tabbar?

很多网友(包括我自己)也遇到过此类问题,在app.json里面明明加了tabbar,list里面也加了路径怎么就是不显示呢?举例,如下代码,为什么屏幕页面底部没有如期出现tabbar呢?

天人系统php娱乐网源码带数据,ubuntu安装XV用法,爬虫 网易云 评论,PHP开启Gopher,美丽说 seolzw

{ "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.jpg", "selectedIconPath": "image/location_selected.jpg"},{ "pagePath": "pages/logs/logs", "text": "设置", "iconPath": "image/setting_normal.jpg", "selectedIconPath": "image/setting_selecred.jpg"} ] }}

我们看一下页面的显示结果如下:

qq注册界面app 源码,怎么用vscode配置c,ubuntu 写保护,tomcat并发内存cpu,梦到爬虫满身,php检测客户端,鹤壁山城区seo优化,博客网站源码,精美手机网站模板lzw

什么是表白软件源码,ubuntu能吃鸡吗,运行tomcat上的rar,perl爬虫代码,php的asset是什么,seo网络营销找行者SEOlzw

原因是: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.jpg","selectedIconPath": "image/location_selected.jpg"},{"pagePath": "pages/logs/logs","text": "设置","iconPath": "image/setting_normal.jpg","selectedIconPath": "image/setting_selecred.jpg"}

是不是发现为什么底部不出现TabBar?原因在于,app.json头部的pages数组的第一项”pages/clickDemo/clickDemo”没有成为tabBar的一员,也就是在tabBar的list数组内没有链接clickDemo页面的条目。

【解决办法】1.我们在list数组内加入链接clickDemo页面的条目,下面给出了这段代码。

{ "pagePath": "pages/clickDemo/clickDemo", "text": "事件Demo", "iconPath": "image/setting_normal.jpg", "selectedIconPath": "image/setting_selecred.jpg"}

效果如下:

方法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就可以了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。