uni-app tabBar 踩坑
{
"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 踩坑的更多相关文章
- Uber使用Swift重写APP的踩坑经历及解决方案(转载)
本文出自Uber移动架构和框架组负责人托马斯·阿特曼于2016年在湾区Swift峰会上的演讲,分享了使用Swfit重写Uber的好与坏.以下为译文: 我是托马斯·阿特曼,目前是Uber移动架构和框架组 ...
- 我的微信小程序入门踩坑之旅
前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...
- 微信小程序之mpvue+iview踩坑之旅
因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- apicloud踩坑集锦
最近在用apicloud开发,这里录入一些踩坑的地方,从头到尾,要多尴尬有多尴尬,新入app开发,记录一些心得,和遇到的坑以及解决办法. 1,apicloud 打包的Android app ,打开fr ...
- Xcode11.1 踩坑备忘录
Xcode11.1 踩坑备忘录(mac系统10.15) 1 .环信ChatDemo2.0报错 这是环信ChatDemo2.0报错 NSInteger numberOfBeforeSection = [ ...
- 【踩坑速记】二次依赖?android studio编译运行各种踩坑解决方案,杜绝弯路,总有你想要的~
这篇博客,只是把自己在开发中经常遇到的打包编译问题以及解决方案给大家稍微分享一下,不求吸睛,但求有用. 1.大家都知道我们常常会遇到dex超出方法数的问题,所以很多人都会采用android.suppo ...
- JavaScript 踩坑心得— 为了高速(下)
一.前言 本文的上一篇 JavaScript 踩坑心得- 为了高速(上) 主要和大家分享的是 JavaScript 使用过程中的基本原则以及编写过程中的心得分享,本文主要和大家聊聊在各个使用场景下的 ...
- JavaScript 踩坑心得— 为了高速(上)
一.前言 很多情况下,产品的设计与开发人员一直想打造一套高品质的解决方案,从而快速.平稳地适应产品迭代.速度是衡量产品适应性的真正且唯一的标准,而且,这并不是笔者的一家之言. 「速度是衡量适应能力的真 ...
随机推荐
- maven项目转换为gradle项目
进入到项目更目录,运行 gradle init --type pom 上面的命令会根据pom文件自动生成gradle项目所需的文件和配置,然后以gradle项目重新导入即可.
- oracle 安装后参数调整
关闭11g 新特性 开归档 oracle 11g安装完成需修改:1.关闭审计alter system set audit_trail=none scope=spfile sid='*'; 防止ORA- ...
- python:split()函数
描述 Python 内置函数 指定分隔符对字符串进行切片 如果参数 num 有指定值,则仅分隔 num 个子字符串 返回分割后的字符串列表. 语法 str.split(str="" ...
- django 中实现文件下载的3种方式
方法一:使用HttpResponse from django.shortcuts import HttpResponse def file_down(request): file=open('/hom ...
- ccs之经典布局(三)(等分,等高布局)
接上篇ccs之经典布局(二)(两栏,三栏布局) 七.等分布局 等分布局是指一行被分为若干列,每一列的宽度是相同的值.两列之间有若干的距离. 1.float+padding+background-cli ...
- bilibili小程序项目总结
1.关于mock的使用 第一步:先到Mock官网(http://mockjs.com/)上面熟悉一下基本用法 第一步:具体使用实例: 下载wxMock.js和mock.js文件 下载地址:https: ...
- feign 多参数问题
参考: https://stackoverflow.com/questions/43604734/springboot-feignclient-method-has-too-many-paramter ...
- 像@Transactional一样利用注解自定义aop切片
在spring中,利用@Transactional注解可以很轻松的利用aop技术进行事物管理.在实际项目中,直接利用自定义注解实现切片可以大大的提高我们的编码效率以及代码的简洁性. 实现以上的目标,主 ...
- lwip 内存配置和使用,以及 如何 计算 lwip 使用了多少内存?
/** * 内存配置 * suozhang 2019年9月6日20:25:48 参考 <<LwIP 应用开发实战指南>> 野火 第5章 LwIP 的内存管理 * * 动态内存池 ...
- 手动写一个类支持foreach循环
之前初学时看过可以实现Iterable接口实现Iterator迭代器的支持,并且也支持foreach循环.现在学习了数据结构,手动写一个单链表支持foreach循环吧. 手写foreach循环步骤: ...