生涯
生涯
  • 发布:2019-10-19 18:32
  • 更新:2020-12-09 09:26
  • 阅读:8202

uni-app版本更新到2.3.5后App平台 重构 tabBar,原生支持 midButton(中间凸起),支持高度调节(App、H5默认高度统一为50px),降低内存占用,避免iOS白屏。

分类:uni-app

uni-app版本更新到2.3.5后App平台 重构 tabBar,原生支持 midButton(中间凸起),支持高度调节(App、H5默认高度统一为50px),降低内存占用,避免iOS白屏。

监听中间按钮的点击事件,uni.onTabBarMidButtonTap(CALLBACK)应该在什么地方使用?

应该怎样跳转对应页面路径?

另外,官方给了设置中间凸起的办法:midButton,但是编辑器在设置相应属性时,没有代码提示,既然给了设置中间凸起的办法,为什么不直接给一个 pagePath 用于设置页面路径。

2019-10-19 18:32 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

相对路径是相对的当前显示的页面的相对路径,而不是当前文件,在非页面内写建议写绝对路径,避免自己搞混

  • 生涯 (作者)

    现在的方法中间按钮凸起后,点击进入成为了二级页面,有没有办法在中间按钮凸起的样式下,点击进入一级页面?

    2019-10-21 16:30

  • DCloud_UNI_GSQ

    回复 生涯: 配置在list里的页面才是tab

    2019-10-21 17:18

  • 7***@qq.com

    请问midButton点击事件,用uni.switchTab跳到和其他tab不重复的页面的话,pages.json里面怎么配置

    2019-12-30 18:32

1***@qq.com

1***@qq.com - 我是小提莫

不能跳转tabbar页面

  • 生涯 (作者)

    这样的话,设置了凸起的样式,页面该怎么做跳转呢?

    2019-10-21 10:36

  • 1***@qq.com

    回复 生涯: 跳转页面不会?navgate啊,设置凸起只能有4个tabbar 或者2个 不能是奇数

    2019-10-21 11:08

  • 生涯 (作者)

    回复 1***@qq.com: 麻烦你帮我看一下代码

    2019-10-21 11:23

生涯

生涯 (作者) - 自学成才

上面这两种方法 我测试都报错啊,只要点击中间按钮就会报错

1***@qq.com

1***@qq.com - 我是小提莫

onLaunch: function() {  
            console.log('App Launch');  
            uni.onTabBarMidButtonTap((e)=>{  
                uni.switchTab({  
                    url: '/pages/index/index'  
                })  
            })  
        },

我这么写 是没有问题的

  • 生涯 (作者)

    谢谢,pages前面加个/就好了

    2019-10-21 16:28

  • 许香香

    回复 生涯: 谢谢!

    2020-06-24 09:29

  • [已删除]

    您这样子写 可以跳转到 tabbar页面吗? 我的怎么不可以呀?

    2020-12-22 09:27

xc_9418_

xc_9418_ - 90后IT男

我想问下楼主。怎么设置midButton 这个的

  • 生涯 (作者)

    在pages.json里面设置,跟list同级

    2019-11-04 14:22

x***@yeah.net

x***@yeah.net

为什么我设置 midButton 没有任何效果?

Z***@163.com

Z***@163.com

我这样设置的

  • DCloud_UNI_GSQ

    HBuilderX 版本多少,哪个平台?

    2019-11-26 16:18

  • Z***@163.com

    回复 DCloud_UNI_GSQ:版本号 2.4.2.20191115 运行到浏览器iphone6/7/8

    2019-11-26 16:45

  • DCloud_UNI_GSQ

    回复 Z***@163.com: 仅app支持,具体看文档

    2019-11-26 16:46

  • Z***@163.com

    回复 DCloud_UNI_方便加一下qq么1803981884,或者我加你

    2019-11-26 16:46

  • Z***@163.com

    回复 DCloud_UNI_Guni-app不是app么?还是要真机才有效果

    2019-11-26 16:49

7***@qq.com

7***@qq.com

请问怎么跳转到tabBar页面

  • 生涯 (作者)

    返回按键啊,中间凸起的按钮样式打开的其实就是个二级页面。

    2019-12-31 11:01

心脏

心脏 - 为奋斗,微生活

楼主按钮点击进入成为了二级页面,有没有办法在中间按钮凸起的样式下,点击进入一级页面? 你怎么解决的

  • 生涯 (作者)

    现在好像没有这种操作,我之前也问了这个问题,没有什么好的解决方法,非要做成一级页面的样子,那就是伪一级页面,就是把以及页面的样式写到二级页面里,不过效果应该不太好。

    2020-01-06 15:47

叶耳朵

叶耳朵

点击突起的突出部分(以tabber栏高度为界限),上面的部分点击不触发事件甚至触发页面上的其他事件,栏内点击midbutton才触发onTabBarMidButtonTap事件。

2***@qq.com

2***@qq.com

"tabBar": {
"color": "#105490",
"selectedColor": "#70FDD9",
"borderStyle": "black",
"backgroundColor": "#042051",
"height": "50px",
"iconWidth":"30px",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "static/images/tab/new_tab_wallet.png",
"selectedIconPath": "static/images/tab/new_tab_wallet_on.png",
"text": "首页"
},
{
"pagePath": "pages/space/space",
"iconPath": "static/images/tab/new_tab_space.png",
"selectedIconPath": "static/images/tab/new_tab_space_on.png",
"text": "空间"
},
{
"pagePath": "pages/market/market",
"iconPath": "static/images/tab/new_tab_mill.png",
"selectedIconPath": "static/images/tab/new_tab_mill_on.png",
"text": "行情"
},
{
"pagePath": "pages/money/money",
"iconPath": "static/images/tab/new_tab_mine.png",
"selectedIconPath": "static/images/tab/new_tab_mine_on.png",
"text": "资产"
}
],
"midButton": {
"width":"60px",
"height":"60px",
"text":"智慧空间",
"iconWidth":"40px",
"iconPath":"static/images/tab/new_tab_wisdom.png"
}
}

在App.vue onLaunch 中添加
onLaunch() {
// 中间按钮点击事件
uni.onTabBarMidButtonTap(function(){
console.log('中间按钮点击事件');
uni.navigateTo({
url:'/pages/wisdom/wisdom'
})
})
},

只能跳转二级页面,一级tab页面实现不了

1***@qq.com

1***@qq.com

请问如何更换中间按钮的文案和图片吗

  • 生涯 (作者)

    已经放弃这个方式了,建议用自定义的,想要什么样式都可以

    2020-12-09 15:51

  • 1***@qq.com

    回复 生涯: 可是自定义的导航栏体验不好,已经试过了

    2020-12-09 16:56

  • 1***@qq.com

    可以自定义中间凸起按钮吗

    2020-12-09 16:56

  • 生涯 (作者)

    回复 1***@qq.com: 当然可以,自定义体验感还可以啊,是不是你处理方式有问题

    2020-12-09 17:25

  • 生涯 (作者)

    回复 1***@qq.com: 自定义底部导航栏,其实还会用到原生导航栏,只是在pages.json文件内 配置底部导航列表,然后隐藏原生底部导航,然后再自定义导航栏里面,使用 navigator 作为路由跳转,跳转类型为 switchTab ,体验感几乎是一样的

    2020-12-09 17:29

  • 1***@qq.com

    回复 生涯: 我有试过,是在ios上体验不好。安卓就不会,

    2020-12-09 17:48

  • 生涯 (作者)

    回复 1***@qq.com: 那就不知道了,我这基本没什么问题

    2020-12-14 14:16

该问题目前已经被锁定, 无法添加新回复