本帖最后由 TheBeauty2017 于 2017-3-24 11:21 编辑

微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示tabbar,而有些页面不显示tabbar呢?今天我把我在开发过程中遇到的问题整理出来跟大家分享。
问题1:为什么页面底部不显示tabbar?
很多网友(包括我自己)也遇到过此类问题,在app.json里面明明加了tabbar,list里面也加了路径怎么就是不显示呢?举例,如下代码,为什么屏幕页面底部没有如期出现tabbar呢?
[AppleScript] 纯文本查看 复制代码
{
  "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"
      }
    ]
  }
}

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

原因是:pages数组的第一项必须是tabBar的list数组的一员。
我们可以看看上面代码中的pages数组的内容是:
[AppleScript] 纯文本查看 复制代码
"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
]


tabbar中list数组内容是:
[AppleScript] 纯文本查看 复制代码
"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页面的条目,下面给出了这段代码。
[AppleScript] 纯文本查看 复制代码
      {
        "pagePath": "pages/clickDemo/clickDemo",
        "text": "事件Demo",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }

效果如下:
20170105094248912.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.教你:微信小程序中如何实在tabbar的切换(附源码)
2.微信小程序开发中底部导航栏tabbar的使用



分享到 :
0 人收藏

3 个回复

倒序浏览
肖大神  小程序牛人 | 2017-3-24 16:30:37
这个必须要点赞了
lus  小程序菜鸟 | 2017-4-5 10:52:01
特地注册一个账号来回复这篇,这个问题我也碰到过,解决方法只有一个,仔细看官方文档发现了 Tips,还是用原来的index 入口不需要换,把wx.navigateTo 或者wx.redirectTo 换成switchTab 即可。
MikeYun  小程序菜鸟 | 2018-3-28 15:00:49
xacsvcdsvfd
您需要登录后才可以回帖 登录 | 朕要注册

本版积分规则

QQ|手机版|51小程序,合作QQ: 2826431922 ( 苏ICP备15027371号 )

Powered by Discuz! X3.2

返回顶部