tabBar不显示

在app.json中配置了4个页面,在tabBar的list中随意写了两个页面,编译后发现不能显示tabBar。

{
"pages": [
"pages/musicList/musicList",
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
], "window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#0094ff",
"navigationBarTitleText": "本地音乐库",
"navigationBarTextStyle": "white"
}, "tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/game.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}

原因:pages中第一项是小程序的起始页面,起始页面必须要在tabBar中,tabBar才能显示出来!


tabBar的小图标iconPath不显示

tabBar中起始页面设置的小图标iconPath无法显示,但其他页面的小图标都能正常显示。

代码如下:

{
"pages": [
"pages/musicList/musicList",
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
], "window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#0094ff",
"navigationBarTitleText": "本地音乐库",
"navigationBarTextStyle": "white"
}, "tabBar": {
"position":"bottom",
"list": [
{
"pagePath": "pages/logs/logs",
"text": "播放中",
"iconPath": "images/game.png"
},
{
"pagePath": "pages/test/test",
"text": "音乐列表",
"iconPath": "images/list.png"
},
{
"pagePath": "pages/musicList/musicList",
"text": "播放中",
"iconPath": "images/game.png"
}
]
}
}

发现无论把起始页面发在list中的第几项,它的小图标都不能显示出来,如下图:

但是在真机上扫码测试,发现并没有这个问题。看来这个是编辑器Bug!?

【微信小程序】tabBar的显示问题的更多相关文章

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

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

  2. 微信小程序tabbar不显示2019.04.06

    app.json中pages的第一项必须在tabBar中,且这一项需要在pages的list中(与顺序无关)否则无法显示tabBar app.json中pages数组中第一项(首页),必须在tabBa ...

  3. 微信小程序--微信小程序tabBar不显示:缺少文件,错误信息:error:iconPath=

    1.list中的第一个tab的地址必须定义在pages 中 2.pagePath的地址一定要正确 正确写法是: "tabBar": { "color": &qu ...

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

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

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

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

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

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

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

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

  8. 微信小程序--TabBar不出现

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

  9. 小程序开发-小程序tabBar不显示的原因分析

    在尝试小程序开发时,tabBar这个是个非常常见的组件,但是今天在进行开发时,设置了TabBarb并没有显示,被这个问题困扰了近半小时,现在将排查问题后所得到的经验记录下来. 首先 如果tabBar不 ...

  10. 微信小程序-隐藏和显示自定义的导航

    微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便 ...

随机推荐

  1. Aborted connection 1055898 to db: 'xxx' user: 'yyy' host: 'xxx.xxx.xxx.xxx' (Got timeout reading communication packets)

    mysql错误日志中,发现大量以下类似信息:(mysql 5.7.18) [Note] Aborted connection 1055898 to db: 'xxx' user: 'yyy' host ...

  2. [译]Spring Boot 构建一个RESTful Web服务

    翻译地址:https://spring.io/guides/gs/rest-service/ 构建一个RESTful Web服务 本指南将指导您完成使用spring创建一个“hello world”R ...

  3. SharePoint 2013 启用 以其他用户身份登陆(Sign in as different user)

    习惯于SharePoint 2010的用户会发现,SharePoint 2013默认把  以其他用户身份登陆(Sign in as different user)的选项去掉了,这对于开发人员来说很麻烦 ...

  4. 设计模式C++实现——模板方法模式

    模式定义: 模板方法模式在一个方法中定义了一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类能够在不改变算法结构的情况下,又一次定义算法中的某些步骤. 模板就是一个方法.更详细的说.这种方法将 ...

  5. laravel5.7的redis配置,一直报错Class 'Predis\Client' not found

    laravel5.7的redis配置,一直报错Class 'Predis\Client' not found 首先我检查了配置,和composer 都没有错,用原生的redis也可以正常连接和读写. ...

  6. unity, 模拟退后台

    //simulateSwitchToBackground.cs using UnityEngine;using System.Collections;using System.Collections. ...

  7. 浏览器中beforeunload的使用

    打开一些慢的网站的时候只见浏览器在不停转圈,但是页面还停留在当前页面的,有些网站的效果是你点击链接要跳到另一个页面的时候,在当前页面弹出一个框提示“正在加载中....”, 用到了浏览器的beforeu ...

  8. Atitti 过程导向 vs 结果导向 attilax的策略

    Atitit  世界著名零食 1.1. /////milk hand candy , milk soft candy . fruit soft candy1 1.2. ==========cookie ...

  9. [sql]mysql指引(整理中...)-对db的分类

    参考 db存储及分层 一个db一个文件夹. 一张表两个文件frm是存表结构的,ibd是存数据的 连接层: sock ip sql层: 存储层: 2018年4月1日 20:53:54小结: 时间太久,抓 ...

  10. Spring下面的classpath 和 classpath* 区别的简单讲解

    classpath 和 classpath* 区别: classpath:只会到你指定的class路径中查找找文件; classpath*:不仅包含class路径,还包括jar文件中(class路径) ...