求教uni-app实现底部导航栏中间的按钮凸起的方案

分类：uni-app

实现上面图片中间加号按钮的样式应该使用什么方案？pages.json里面的tabBar不支持这种样式
我先说一下自己尝试的两种方案：
1、在页面最上层弄一个凸起图片，定位到导航栏的最中间位置，效果虽然可以，但是缺点是只支持app，小程序不兼容，而且每个页面都要调用隐藏这个凸起图片的方法
2、使用colorUI里面的组件形式，将底部的导航栏菜单全部改成组件的形式，这样效果和兼容性保证了，不过将菜单改成组件形式，导致里面的生命周期，上拉下拉等一些uni-app提供的接口无法使用
请问有更好的实现思路吗？

2019-05-09 11:43 负责人:无分享

4 个回复

m***@163.com - mingzaily

我们也是才有colorUI的方法，把四个一级页面封装成组件，在小程序上onLoad不生效，倒是vue的mounted生效

mounted:()=>{  
    console.log("home")  
},  
onLoad: () => {  
    console.log("res")  
}

但是在app里面onLoad和mounted都会生效，至于下拉刷新的api还没尝试

退役熬夜选手

你好请问你这个问题解决了吗

y***@jqsoft.net (作者)

解决了，就是不用这个凸起效果了。。官方给的方案都有缺陷，不能完美实现这个效果

2019-06-18 11:28
退役熬夜选手

回复 y***@jqsoft.net: https://ext.dcloud.net.cn/plugin?id=251 这个插件你试了吗？我打算用这个插件不知道结果会怎么样....

2019-06-18 11:40
y***@jqsoft.net (作者)

回复退役熬夜选手: 我用的就是这个方法，有BUG，请看评论里面6月6日我发的评论，作者一直没有回复。有时候icon.hide方法执行不生效，导致凸起按钮在每个页面都显示。只有把app退出再进，才会正常显示。我试着把延时时间改成200，300，400都不行，有时还会出现icon.hide执行后没有隐藏凸起按钮，只是有时会发生这种情况，不是每次

2019-06-18 13:53

wodrow - 阳光就在指间

在page.json添加midButton,list是偶数时生效

"list": [  
    {  
        "pagePath": "pages/site/Home",  
        "iconPath": "static/logo.png",  
        "selectedIconPath": "static/logo.png",  
        "text": "首页"  
    },  
    {  
        "pagePath": "pages/user/center/Index",  
        "iconPath": "static/logo.png",  
        "selectedIconPath": "static/logo.png",  
        "text": "个人中心"  
    }  
],  
"midButton": {  
    "width": "63px",  
    "height": "63px",  
    "iconPath": "static/tabBar/plus.png",  
    "iconWidth": "55px"  
}

[已删除]

https://ask.dcloud.net.cn/article/39423 刚解决热乎的

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

求教uni-app实现底部导航栏中间的按钮凸起的方案

4 个回复

公告

相关问题

求教uni-app实现底部导航栏中间的按钮凸起的方案

与内容相关的链接

4 个回复

公告

相关问题