微信小程序开发过程中tabbar页面显示的相关问题及解决办法!
在微信小程序的开发过程中如果有使用过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": "#ddd",
"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的使用
微信小程序开发过程中tabbar页面显示的相关问题及解决办法!的更多相关文章
- 微信小程序 开发过程中遇到的坑(一)
2124 1.我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 的时候在pages中写注释的时候回报错. 例如: { &quo ...
- 微信小程序开发过程中一些经验总结
1.微信开发者工具报错,微信小程序最低需支持tls1.2版本的问题 原因是服务器不支持ssl的高版本,解决方法: 在/etc/nginx/conf.d文件下,把"ssl_protocols ...
- 微信小程序开发过程中出现问题及解答
1.wx.uploadFile上传图片,控制台抛出错误"uploadFile:fail Error:Hostname/IP doesn't match certificate's altna ...
- 关于微信小程序开发中遇到的缺少game.json问题的解决
一.小程序开发的两种选项 ①小游戏开发:内部对应的入口配置文件为game.json丶game.wxml之类的文件或者项目. ②小程序开发:内部对应的入口配置文件为app.json丶app.wxml之类 ...
- 微信小程序-工具无法加载本地模拟开发服务的解决办法
微信小程序开发工具出现如下问题: 因为网络代理软件或者 VPN 影响,工具无法加载本地模拟开发服务 请尝试以下任一解决方案1.关闭相关网络代理软件,重新编译成功后,再启动相关网络代理软件: 2.配置 ...
- 微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面
如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',}) 不起作用,需要使用 w ...
- 总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...
- 全栈开发工程师微信小程序-上(中)
全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
随机推荐
- hdoj--1872--稳定排序(水题)
稳定排序 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
- 【前端】window.resize的优化
一.概述 window.resize事件会在窗口尺寸改变的时候触发,哪怕只是改变了1像素.所以当窗口进行拖动的时候会触发很多次,很容易就卡死. 虽然部分浏览器已经进行了一点优化,但这还不够. 二.优化 ...
- bzoj1770: [Usaco2009 Nov]lights 燈(折半搜索)
1770: [Usaco2009 Nov]lights 燈 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1153 Solved: 564[Submi ...
- extjs grid禁止表格头部使用鼠标拖拽改变宽度
extjs6 经典版 表格头部使用鼠标拖动 禁止改变列的宽度 只需要给grid 设置属性enableColumnResize:false就可以啦 xtype:'grid', enableColumnR ...
- 【第三届强网杯】write up
一,鲲or鳗orGame 从浏览器里拿到game.gb 用 VisualBoyAdvance ,搜索内存变量,然后改变量就完事了,但是改变量他们说直接利用添加代码功能有bug,所以要在工具里的内存查看 ...
- JavaScript编程艺术-第10章-10.2-实用的动画
10.2-实用的动画 ***代码亲测可用*** HTML: <!DOCTYPE HTML> <html> <head> <meta charset=" ...
- 【js】再谈移动端的模态框实现
移动端模态框的机制因为与PC的模态框机制一直有所区别,一直是许多新人很容易踩坑的地方,最近笔者作为一条老咸鱼也踩进了一个新坑中,真是平日里代码读得太粗略,故而写上几笔,以儆效尤. 故事的起因是这样的, ...
- Python中re操作正则表达式
在python中使用正则表达式 1.转义符 正则表达式中的转义: '\('表示匹配小括号 [()+*/?&.] 在字符组中一些特殊的字符会现出原形 所有的\s\d\w\S\D\W\n\t都表示 ...
- ACM_求f(n)
求f(n) Time Limit: 2000/1000ms (Java/Others) Problem Description: 设函数f(n)=1*1*1+2*2*2+3*3*3+...+n*n*n ...
- Sql2008调试问题
t-sql调试的时候,报以下错误 处理 1.要在服务器本机,不要远程 2.服务器名称用电脑名称(cmd->hostname),不要用IP,(local)或. 调试快捷键跟VS一样 F11逐语句 ...