uni-app tabBar 踩坑

土菜馆 發表於 2019-11-15 15:51:00

<div class="cnblogs_code"><img id="code_img_closed_36b1575f-e30c-4b64-b184-7e58886231b5" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_36b1575f-e30c-4b64-b184-7e58886231b5" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_36b1575f-e30c-4b64-b184-7e58886231b5" class="cnblogs_code_hide">
<pre>{
"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"
 // }
 ]
}
}</pre>
</div>
View Code</div>
描述：tabBar跳转的路由默认header 是没有返回按钮的只有其他方式跳转的页面会显示返回键（tabBar默认是没有上一页所以不需要显示返回键）
　　如果想显示返回键需要自定义顶部导航；
bug1:自定义导航（需要在页面利用onNavigationBarButtonTap方法监听其中要注意当前方法与data同级）如果利用 uni.navigateTo返回（tabBar其中的路径会报错：navigateTo:fail can not navigateTo a tabbar page）需要用到uni.switchTab才可以跳转；
<div class="cnblogs_code">
<pre> 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)
 }</pre>
</div>
 
  
来源：https://www.cnblogs.com/lst619247/p/11867235.html

頁: [1]

琼殿技术论坛's Archiver

uni-app tabBar 踩坑