【微信小程序】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中list第一项设置为小程序的起始页面后,发现设置小图标iconPath无法显示。但是把起始页面放到list其他位置(非第一项),就能正确显示小图标iconPath。

时间: 2024-11-09 00:15:37

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

微信小程序tabBar显示问题

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

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

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi

微信小程序 tabBar 无效原因

pages加载顺序第一个需要list第一个相同,理由不明. "pages": [ "pages/index/index", "pages/logs/logs", "pages/login/login" ], "tabBar": { "list": [ { "pagePath": "pages/index/index", //如果是其他的就没法显示,

微信小程序TabBar的使用

一.TabBar使用步骤 1.创建所需要的界面和所需要的图片: 2.配置文件: 我们找到项目根目录中的配置文件 app.json 加入如下配置信息 按 Ctrl+C 复制代码 按 Ctrl+C 复制代码 属性的解释 tabBar  指底部的 导航配置属性 color  未选择时 底部导航文字的颜色 selectedColor  选择时 底部导航文字的颜色 borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条) list   导航配置

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序配置_小程序页面配置

微信小程序配置_小程序页面配置 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": &q

动手开发一个名为“微天气”的微信小程序(上)

引言:在智能手机软件的装机量中,天气预报类的APP排在比较靠前的位置.说明用户对天气的关注度很高.因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排.跟着本文开发一个"微天气"小程序,方便微信网友随时查看天气.接下来两天小编将同您一起开发一个"微天气"小程序,本文首先向大家介绍"微天气"的API与界面代码编写.本文选自<从零开始学微信小程序开发>. 在一套软件系统中,微信小程序通常是作为前端来使用的,一般还需要有后端的系

微信小程序使用wxParse解析html

转:http://www.jianshu.com/p/3de027555e77 最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现.首先我们在github上下载wxParsehttps://github.com/icindy/wxParse 下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下 下面是具体

微信小程序开发 记录

采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因,最后提供正确的实例.  错误现象是,项目的app.json使用以下代码,却没有如期望那样在屏幕底部出现TabBar. { "pages":[ "pages/clickDemo/clickDemo", "pages/logs/logs", "

在微信小程序里自动获得当前手机所在的经纬度并转换成地址

效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的文字描述. wx.ready(() => { wx.getLocation({ type: "gcj02", success: function(res) { var location = "&location=" + res.longitude + &q