{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/index/index0",
"style": {
"navigationBarTitleText": "uni-app000"
// "app-plus":{
// "titleNView":{
// "buttons":[
// {
// "type":"back",
// "color":"#333333",
// "text":"返回",
// "float":"left"
// }
// ]
// }
// }
}
},
{
"path": "pages/components/shitu",
"style": {
"navigationBarTitleText": "视图",
"navigationBarBackgroundColor":"#333333",
"navigationBarTextStyle":"white",//导航字体颜色
"enablePullDownRefresh":true,//是否下拉刷新
"navigationStyle":"default",//设置为custom导航栏消失
"app-plus": {
"bounce":"none",
// "animationType": "slide-in-right",
// "animationDuration": 300000,
"titleNView": {
"titleText":"设置视图文件",
"buttons":[
{
"type":"back",
"color":"#FFFFFF",
"float":"left"
},
{
"type":"share",
// "text":"\ue534",
"colorPressed":"#c8000a",
"color":"#FFFFFF",
"float":"right",
"badgeText":"12",
"redDot":true
}
]
} }
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar":{
"color":"#4CD964",
"backgroundColor":"#333333",
"fontSize":"14px",
"height":"44px",
"selectedColor":"#007AFF",
"position":"bottom",
"list":[
{
"pagePath":"pages/components/shitu",
"iconPath":"static/logo.png",
"selectedIconPath":"static/logo.png",
"text":"组件"
},
{
"pagePath":"pages/index/index",
"iconPath":"static/logo.png",
"selectedIconPath":"static/logo.png",
"text":"API"
}
// ,
// {
// "pagePath":"pages/index/index0",
// "iconPath":"static/logo.png",
// "selectedIconPath":"static/logo.png",
// "text":"API01"
// }
]
}
}

描述:tabBar跳转的路由 默认header 是没有返回按钮的 只有其他方式跳转的页面 会显示返回键(tabBar默认是没有上一页所以 不需要显示返回键)

  如果想显示返回键 需要 自定义 顶部导航;

bug1:自定义导航(需要在页面利用onNavigationBarButtonTap方法监听其中要注意 当前方法 与data同级)如果利用 uni.navigateTo返回(tabBar其中的路径会报错:navigateTo:fail can not navigateTo a tabbar page)需要用到uni.switchTab才可以跳转;

        onNavigationBarButtonTap(e) {
console.log(this)
console.log(this.$mp)
uni.switchTab({
url: '/pages/index/index'
})
// uni.navigateBack({
// delta: 2
// });
// history.back(2)
// this.$router.history.go(-1)
}

uni-app tabBar 踩坑的更多相关文章

  1. Uber使用Swift重写APP的踩坑经历及解决方案(转载)

    本文出自Uber移动架构和框架组负责人托马斯·阿特曼于2016年在湾区Swift峰会上的演讲,分享了使用Swfit重写Uber的好与坏.以下为译文: 我是托马斯·阿特曼,目前是Uber移动架构和框架组 ...

  2. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  3. 微信小程序之mpvue+iview踩坑之旅

    因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...

  4. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  5. apicloud踩坑集锦

    最近在用apicloud开发,这里录入一些踩坑的地方,从头到尾,要多尴尬有多尴尬,新入app开发,记录一些心得,和遇到的坑以及解决办法. 1,apicloud 打包的Android app ,打开fr ...

  6. Xcode11.1 踩坑备忘录

    Xcode11.1 踩坑备忘录(mac系统10.15) 1 .环信ChatDemo2.0报错 这是环信ChatDemo2.0报错 NSInteger numberOfBeforeSection = [ ...

  7. 【踩坑速记】二次依赖?android studio编译运行各种踩坑解决方案,杜绝弯路,总有你想要的~

    这篇博客,只是把自己在开发中经常遇到的打包编译问题以及解决方案给大家稍微分享一下,不求吸睛,但求有用. 1.大家都知道我们常常会遇到dex超出方法数的问题,所以很多人都会采用android.suppo ...

  8. JavaScript 踩坑心得— 为了高速(下)

    一.前言 本文的上一篇 JavaScript 踩坑心得- 为了高速(上) 主要和大家分享的是 JavaScript 使用过程中的基本原则以及编写过程中的心得分享,本文主要和大家聊聊在各个使用场景下的 ...

  9. JavaScript 踩坑心得— 为了高速(上)

    一.前言 很多情况下,产品的设计与开发人员一直想打造一套高品质的解决方案,从而快速.平稳地适应产品迭代.速度是衡量产品适应性的真正且唯一的标准,而且,这并不是笔者的一家之言. 「速度是衡量适应能力的真 ...

随机推荐

  1. jquery ready load

    jq 加载三种写法 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码. ...

  2. Elasticsearch中文文档,内容不全

    注意 内容不全,这是观看中文文档进行操作的 文档地址 旧版中文文档,部分内容过期 https://www.elastic.co/guide/cn/elasticsearch/guide/current ...

  3. python、第一篇:初识数据库

    一 数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件 ...

  4. Redis位操作介绍

    在学习redis的过程了,看到了redis还能用于大数据处理,具体场景如下:腾讯10亿用户,要几个毫秒内查询到某个用户是否在线,你能怎么做?千万别说给每个用户建立一个key,然后挨个记(你可以算一下需 ...

  5. 13 Zabbix4.4.1系统告警“More than 75% used in the configuration cache”

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 13 Zabbix4.4.1系统告警“More than 75% used in the conf ...

  6. Linux环境测试机器端口连通性

    生产中,有很大一部分的问题都是由于不同机器间网络不同导致的,那么如何判断两台机器之间的连通性?本文介绍几种常见的方式: telnet方法wget方法ssh方法curl方法1. telnet方法格式:t ...

  7. git中working tree, index, commit

    这三个名字可以简单理解为文件在本地仓库存在的三种不同的位置. 如下,是做commit提交两段提交过程,工作区(working tree),暂存区(index)和 branch(commit). wor ...

  8. 写一个基于TCP协议套接字,服务端实现接收客户端的连接并发

    ''' 写一个基于TCP协议套接字,服务端实现接收客户端的连接并发 ''' client import socket import time client = socket.socket() clie ...

  9. BZOJ4004 [JLOI2015]装备购买[贪心+线性基+高消]

    一个物品可以被其他物品表出,说明另外的每个物品看成矩阵的一个行向量可以表出该物品代表的行向量. 于是构造矩阵,求最多选多少个物品,就是尽可能用已有的物品去表示,相当于去消去一些没必要物品, 类似于xo ...

  10. poj3666/CF714E/hdu5256/BZOJ1367(???) Making the Grade[线性DP+离散化]

    给个$n<=2000$长度数列,可以把每个数改为另一个数代价是两数之差的绝对值.求把它改为单调不增or不减序列最小代价. 话说这题其实是一个结论题..找到结论应该就很好做了呢. 手玩的时候就有感 ...