{
"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. 前端框架:Angular React 和 Vue的比较

    前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React, ...

  2. windows下xgboost安装到python

    初始环境 在安装之前,我的anaconda2已经安装好,git也有装好 下载相对应的xgboost.dll文件 下载地址 Installing the Python Wrapper for me: x ...

  3. 10、LNMP架构

    1LNMP架构概述 1.1.什么是LNMP  LNMP 是一套技术的组合,L = Linux,N = Nginx,M~ = MySQL,P~ = PHP 1.2.LNMP架构是如何工作的 首先Ngin ...

  4. linux 网卡配置详情

    1.配置文件/etc/hosts(本地主机ip地址映射,可以有多个别名)./etc/services(端口号与标准服务之间的对应关系)./etc/sysconfig/network(设置主机名,网关, ...

  5. Flow-based model

    文章1:  NICE: NON-LINEAR INDEPENDENT COMPONENTS ESTIMATION 文章2:Real-valued Non-Volume Preserving (Real ...

  6. ORACLE纯SQL实现多行合并一行

    项目中遇到一个需求,需要将多行合并为一行.表结构如下:NAME                            Null           Type---------------------- ...

  7. linux 下mysql忘记密码或者安装好linux后不知道mysql初始密码解决方案

    1.使用yum安装mysql后 2.初始密码在/var/log/mysqld.log这个文件里 3.输入命令:grep 'temporary password' /var/log/mysqld.log ...

  8. 【HDU5890】Eighty seven

    题目大意:给定 N 个数,M 个询问,每次询问如果去掉三个数(可能相同),能否选择恰好 10 个数字,凑出 87 这个数. 题解:骚操作.. 集合凑数问题是一个很经典的模型,即:背包问题. 先进行预处 ...

  9. 数组扩展运算符 -ES6

    1.将数组转为以逗号分隔的序列 2.格式 ...[1,2,3 ] 3.若扩展运算符后面是一个空数组,则不产生效果[ ] 4.用于函数参数 function add(x,y) { console.log ...

  10. mysql之单表条件查询

    create table staff_info( id int primary key auto_increment, name varchar(32) not null, age int(3) un ...