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

马永翠发布于2019-08-01 16:34 / 2182人阅读

摘要：在微信小程序的开发过程中如果有使用过的同学，我相信一定会遇到一些困扰。其他关于开发相关的问题可以看微信小程序开发教程教你微信小程序中如何实在的切换附源码微信小程序开发中底部导航栏的使用

在微信小程序的开发过程中如果有使用过tabbar的同学，我相信一定会遇到一些困扰。为什么有些时候代码中明明已经在app.json里面增加了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": "#ffffd",
    "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数组中第一项（首页），必须在tabBar---list数组中出现，list中第几个无所谓；但如果首页不在list里面，当然无法渲染出来，这就可以理解app.json是首次页面配置了

问题2：有没有什么办法让小程序首页不显示tabbar，而非首页显示tabbar？
这个目前还没有想到解决办法，欢迎大家帮忙解答

问题3：有些页面并不在tabbar的list页面里面，为什么页面底部也显示tabbar呢？如果从一级页面 redirectTo到其他页面，会发现即使其他页面没有在 TabBar定义的列表里也会显示TabBar，该如何解决？

【解决办法】假如当前也是一级页面，到希望跳转到的页面不要有Tabbar时，不要使用 redirectTo而是使用 navigateTo就可以了。

其他关于tabbar开发相关的问题可以看微信小程序开发教程：http://bbs.html51.com/f-37-1/：
1.教你：微信小程序中如何实在tabbar的切换（附源码）
2.微信小程序开发中底部导航栏tabbar的使用

云服务器 GPU云服务器微信小程序开发微信小程序开发语言微信小程序开发免费微信小程序开发步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50605.html

微信小程序开发时的常见问题

摘要：微信小程序开发常见问题一项目结构微信小程序项目结构主要有四个文件类型如下是框架设计的一套标签语言，结合基础组件事件系统，可以构建出页面的结构。微信小程序开发常见问题？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：项目结构微信小程序项目结构主要有四个文件类型,如下 WXML （WeiXin Markup La...

qpwoeiru96 2019-08-26 10:41 评论0 收藏0
微信小程序开发时的常见问题

摘要：微信小程序开发常见问题一项目结构微信小程序项目结构主要有四个文件类型如下是框架设计的一套标签语言，结合基础组件事件系统，可以构建出页面的结构。微信小程序开发常见问题？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：项目结构微信小程序项目结构主要有四个文件类型,如下 WXML （WeiXin Markup La...

TNFE 2019-08-19 10:24 评论0 收藏0
微信小程序开发时的常见问题

摘要：微信小程序开发常见问题一项目结构微信小程序项目结构主要有四个文件类型如下是框架设计的一套标签语言，结合基础组件事件系统，可以构建出页面的结构。微信小程序开发常见问题？ showImg(https://segmentfault.com/img/bVbwbou?w=720&h=450);一：项目结构微信小程序项目结构主要有四个文件类型,如下 WXML （WeiXin Markup La...

tianyu 2019-08-30 15:44 评论0 收藏0
Taro：使用taro完成小程序开发

摘要：前言是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。前言：taro是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。小程序项目搭建gitup已经有很清楚的说明：https://github.com/NervJS/taro 一.主要操作步骤及命令： 1.cnpm install -g @tarojs/cli 全局安装taro...

Me_Kun 2019-08-02 11:49 评论0 收藏0
Taro：使用taro完成小程序开发

摘要：前言是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。前言：taro是一个可以很好实现一次开发，多端统一的框架，本文只介绍它小程序端开发的一些内容。小程序项目搭建gitup已经有很清楚的说明：https://github.com/NervJS/taro 一.主要操作步骤及命令： 1.cnpm install -g @tarojs/cli 全局安装taro...

lavor 2019-08-23 12:31 评论0 收藏0