405456070@qq.com
405456070@qq.com
  • 发布:2019-10-19 18:32
  • 更新:2020-08-27 14:51
  • 阅读:4039

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

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

  • 405456070@qq.com (作者)

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

    2019-10-21 16:30

  • DCloud_UNI_GSQ

    回复 405456070@qq.com: 配置在list里的页面才是tab

    2019-10-21 17:18

  • 776875292@qq.com

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

    2019-12-30 18:32

1046865524@qq.com

1046865524@qq.com - 我是小提莫

不能跳转tabbar页面

405456070@qq.com

405456070@qq.com (作者) - 自学成才

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

1046865524@qq.com

1046865524@qq.com - 我是小提莫

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

我这么写 是没有问题的

Xc_9418@163.com

Xc_9418@163.com - 90后IT男

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

  • 405456070@qq.com (作者)

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

    2019-11-04 14:22

xuexxd@yeah.net

xuexxd@yeah.net

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

Zhang1208h@163.com

Zhang1208h@163.com

我这样设置的

776875292@qq.com

776875292@qq.com

请问怎么跳转到tabBar页面

  • 405456070@qq.com (作者)

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

    2019-12-31 11:01

心脏

心脏 - 为奋斗,微生活

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

  • 405456070@qq.com (作者)

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

    2020-01-06 15:47

叶耳朵

叶耳朵

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

249786001@qq.com

249786001@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页面实现不了

要回复问题请先登录注册