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

app.json正确代码:

{
"pages":[
"pages/index/index",
"pages/leader/leader",
"pages/leader/stories/stories",
"pages/leader/authors/authors",
"pages/stack/stack",
"pages/stack/booklist/booklist",
"pages/stack/booklist/bookdetail/bookdetail",
"pages/bookdesk/bookdesk",
"pages/mine/mine",
"pages/mine/news/news",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "网易蜗牛读书",
"navigationBarTextStyle":"black"
},
"tabBar":{
"color":"#999999",
"selectedColor":"#444444",
"backgroungColor":"#ffffff",
"borderStyle":"#e0e0e0",
"list": [
{
"pagePath":"pages/leader/leader",
"iconPath": "assets/icons/lingdu.png",
"selectedIconPath": "assets/icons/lingdu_sel.png",
"text":"领读"
},
{
"pagePath":"pages/stack/stack",
"iconPath": "assets/icons/stack.png",
"selectedIconPath": "assets/icons/stack_sel.png",
"text":"分类"
},
{
"pagePath": "pages/bookdesk/bookdesk",
"iconPath": "assets/icons/bookdesk.png",
"selectedIconPath": "assets/icons/bookdesk_sel.png",
"text":"书桌"
},
{
"pagePath":"pages/mine/mine",
"iconPath": "assets/icons/mine.png",
"selectedIconPath": "assets/icons/mine_sel.png",
"text":"我的"
}
]
}
}

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

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

{
"pagePath":"pages/index/index",
"iconPath": "assets/icons/index.png",
"selectedIconPath": "assets/icons/index_sel.png",
"text":"首页"
}

但是我的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. php遍历目录与文件夹的多种方法详解

    遍历目录或遍历目录下指定类型的文件,这是每一个童鞋在写程序的时候难免会用到的.PHP本身也提供了很多灰常有用的函数,正确地使用它们,不会有错滴.下面就我个人学习过程中的一些总结,希望对想学PHP的童鞋 ...

  2. 中文日历Calendar

    一.层次结构 Object<-----Calendar<-----EastAsianLunisolarCalendar<-----ChineseLunisolarCalendar(农 ...

  3. 2.3 vue配置(上)

    rm,在打包之前把上一次打包之后的东西删掉,然后webpack重新打包 通过DefinePlugin形成一个环境变量 HTML打包插件

  4. python - redis 的使用

    1.redis连接 redis提供两个类Redis和StrictRedis用于实现Redis的命令,StrictRedis用于实现大部分官方的命令,并使用官方的语法和命令,Redis是StrictRe ...

  5. 测试使用API

    https://api.github.com/users/github 返回值中的某些URL也可以作为测试API使用

  6. mysql 修改表结构以支持事务操作

    修改表的类型为 INNODB 的 SQL: alter table category_ ENGINE = innodb;     查看表的类型的 SQL show table status from ...

  7. [Go] 基础系列二:channel的关闭和广播

    利用channe关闭任务 package ch21 import ( "fmt" "testing" "time" ) //判断是否有取消任 ...

  8. ROS常用命令

    ROS常用命令 打印ros环境变量 $ echo $ROS_PACKAGE_PATH 确认环境变量已经设置正确 export | grep ROS 环境变量设置文件 sudo gedit ./.bas ...

  9. Spring Boot :Failed to instantiate SLF4J LoggerFactory Reported exception:

    Spring Boot出现以下错误: Failed to instantiate SLF4J LoggerFactory Reported exception: Failed to instantia ...

  10. Gitlab 服务器搭建

    一.官网地址 首页:https://about.gitlab.com/ 安装说明:https://about.gitlab.com/installation/ 二.安装命令摘录 实际问题:yum 安装 ...