今天打算开始实战一个微信小程序项目,一开始就踩坑了,正确设置了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. matlab(6) Regularized logistic regression : plot data(画样本图)

    Regularized logistic regression :  plot data(画样本图) ex2data2.txt 0.051267,0.69956,1-0.092742,0.68494, ...

  2. python----PySnooper获取打印日志

    官网链接:https://pypi.org/project/PySnooper/ 安装:pip install PySnooper 使用方式,直接 导入import pysnooper,添加装饰器   ...

  3. fsLayuiPlugin树+数据表格使用

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  4. day 50 jquary 终极版本

    jQuary 一.jquary对象和dom对象 jquary找到的标签对象成为-- jquary对象 原生js找到的标签对象成为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jque ...

  5. GreenPlum 数据备份与恢复

    GreenPlum数据备份与恢复gp_dump是GP并行备份的备份工具,在运行gp_dump的时候master与所有的segment节点都开始备份(standby节点和segment节点中的mirro ...

  6. 十五.DNS子域授权、分离解析、缓存DNS服务器

    1.搭建基本DNS服务器 pc7: 1.1 安装软件包 ]# yum -y install bind-chroot bind bind         //域名服务包 bind-chroot  //提 ...

  7. Python2.7学习

    网上很多代码都不适用于python3版本,所以还是转回版本2来学习了 install 安装模块特别简单 E:\01_SOFT\Python27\python  -m easy_install sunb ...

  8. Planet.Earth.II.EP05.2016

  9. 解决update-apt-xapi占用资源过高的问题

    最近云主机出现了个报错,查看系统日志发现是update-apt-xapi任务占用资源过高,甚至内存占完了无法开辟内存 云主机:Ubuntu 14.04.5 LTS update-apt-xapi是干嘛 ...

  10. [bzoj 1861][zjoi2006] 书架

    传送门 Description 1. Top S--表示把编号为S的书放在最上面. 2. Bottom S--表示把编号为S的书放在最下面. 3. Insert S T--T∈{-1,0,1},若编号 ...