今天打算开始实战一个微信小程序项目,一开始就踩坑了,正确设置了TabBar,但是TabBar就是不能显示出来,后面才找到原因,这里记录下:

app.json正确代码:

  1. {
  2. "pages":[
  3. "pages/index/index",
  4. "pages/leader/leader",
  5. "pages/leader/stories/stories",
  6. "pages/leader/authors/authors",
  7. "pages/stack/stack",
  8. "pages/stack/booklist/booklist",
  9. "pages/stack/booklist/bookdetail/bookdetail",
  10. "pages/bookdesk/bookdesk",
  11. "pages/mine/mine",
  12. "pages/mine/news/news",
  13. "pages/logs/logs"
  14. ],
  15. "window":{
  16. "backgroundTextStyle":"light",
  17. "navigationBarBackgroundColor": "#fff",
  18. "navigationBarTitleText": "网易蜗牛读书",
  19. "navigationBarTextStyle":"black"
  20. },
  21. "tabBar":{
  22. "color":"#999999",
  23. "selectedColor":"#444444",
  24. "backgroungColor":"#ffffff",
  25. "borderStyle":"#e0e0e0",
  26. "list": [
  27. {
  28. "pagePath":"pages/leader/leader",
  29. "iconPath": "assets/icons/lingdu.png",
  30. "selectedIconPath": "assets/icons/lingdu_sel.png",
  31. "text":"领读"
  32. },
  33. {
  34. "pagePath":"pages/stack/stack",
  35. "iconPath": "assets/icons/stack.png",
  36. "selectedIconPath": "assets/icons/stack_sel.png",
  37. "text":"分类"
  38. },
  39. {
  40. "pagePath": "pages/bookdesk/bookdesk",
  41. "iconPath": "assets/icons/bookdesk.png",
  42. "selectedIconPath": "assets/icons/bookdesk_sel.png",
  43. "text":"书桌"
  44. },
  45. {
  46. "pagePath":"pages/mine/mine",
  47. "iconPath": "assets/icons/mine.png",
  48. "selectedIconPath": "assets/icons/mine_sel.png",
  49. "text":"我的"
  50. }
  51. ]
  52. }
  53. }

这里注意显示解决有两种方式:

1.pages里的首个页面必须在list数组里有配置,所以在lists数组里加一个字典对象即可。

  1. {
  2. "pagePath":"pages/index/index",
  3. "iconPath": "assets/icons/index.png",
  4. "selectedIconPath": "assets/icons/index_sel.png",
  5. "text":"首页"
  6. }

但是我的TabBar又不想有这个item显示,这里看第二种解决办法。

2.pages数组的第一项必须是tabBar的list数组的一员:

这里有个疑惑:

百度了解决方法,显示将list数组加了index的模块item,后面不想要index模块在TabBar显示,然后又删除再运行,问题就解决了,也没有设置pages数组的第一项必须是tabBar的list数组的一员。

解决了就好,知道的大神可以留言告诉我哟!

微信小程序--TabBar不出现的更多相关文章

  1. 微信小程序tabbar设置样式在哪里改

    微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...

  2. 微信小程序tabBar与redirectTo 或navigateTo冲突

    微信小程序tabBar与redirectTo 或navigateTo冲突 tabBar设置的pagePath无法再次被redirectTo或navigateTo引用 导致跳转失败,更改为swithTa ...

  3. 微信小程序tabBar 不显示底部菜单的原因和解决方法

    1,书写,正确书写时tabBar,不要写成tabbar!!! 2,当创建新工程时,app.json中Pages配置是这样的 ,,[图1], 注意:微信小程序里面的json文件时不能注释的,图中只是给读 ...

  4. 微信小程序tabBar显示问题

    在微信小程序的开发中,我遇到疑惑如下: 在app.json中定义了多个pages,一般微信小程序启动的时候,自动加载pages下的第一个页面, "pages": [        ...

  5. 微信小程序~TabBar底部导航切换栏

    底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...

  6. 微信小程序tabBar的一个小坑

    开始接触微信小程序的项目开发时,自己想添加底部导航,按照文档的方法在app.json添加tabBar,结果编译不出,工具台也没错误提示. 尝试在网上搜一下,看到有碰到类似情况的,解决方法是:app.j ...

  7. 微信小程序 tabBar模板

    tabBar导航栏 小程序tabBar,我们可以通过app.json进行配置,可以放置于顶部或者底部,用于不同功能页面的切换,挺好的... 但,,,貌似不能让动态修改tabBar(需求:通过switc ...

  8. 微信小程序 - tabbar动态更换图标以及文字

    大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...

  9. 异常:微信小程序tabBar不生效

    app.json全局tabBar设置tabBar不显示 由于小程序的机制问题,首页的tabBar第一个导航必须是首页 "pages": [ "pages/index/in ...

随机推荐

  1. NOI2008 志愿者招募 (费用流)

    题面 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难题:为即将启动的奥运新项目招募一批短期志愿者.经过估算,这个项目需要N 天才能完成,其中第i 天至 ...

  2. BZOJ3678 wangxz与OJ (平衡树 无旋treap)

    题面 维护一个序列,支持以下操作: 1.在某个位置插入一段值连续的数. 2.删除在当前序列位置连续的一段数. 3.查询某个位置的数是多少. 题解 显然平衡树,一个点维护一段值连续的数,如果插入或者删除 ...

  3. emit传多个参数

    https://blog.csdn.net/lxy123456780/article/details/87811113 子组件: this.$emit('closeChange',false,true ...

  4. ElementUI 之 Cascader 级联选择器指定 value label

    ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...

  5. idea创建springmvc项目创部署成功,但访问controller层报错404

    这个问题网上有很多解决问题,检查配置文件是否正确?controller注解是否扫描?项目启动是否成功等等. 访问报错404,而且后台也没错误,归根结底还是访问路径错了. 1.如图,idea配置tomc ...

  6. 007_硬件基础电路_RC复位电路中二极管的作用

    --------------------- 作者:碎碎思 来源:CSDN 原文:https://blog.csdn.net/Pieces_thinking/article/details/781110 ...

  7. P2401 不等数列

    题目描述 将1到n任意排列,然后在排列的每两个数之间根据他们的大小关系插入“>”和“<”.问在所有排列中,有多少个排列恰好有k个“<”.答案对2015取模. 注:1~n的排列指的是1 ...

  8. 搭建自己的博客(六):添加首页,使用css对界面做美化

    之前优化了一些代码,但是之前进入首页直接进入了博客列表,今天添加了首页,以区分和博客的区别,并且使用css代码美化了之前的一些东西. 1.变化的部分,先上图:(蓝色表示修改,红色表示新增)

  9. 使用jsonpath解析多层嵌套的json响应信息

    Python自带的json库可以把请求转为字典格式, 但在多层嵌套的字典中取值往往要进行多次循环遍历才能取到相应的数据, 如: res_dict = { "code": 0, &q ...

  10. kde的配置文件

    主要是home目录下:/.kde4/share/config/ 如果实在是搞不定,还可以直接将.kde4目录全部删除或者替换即可.