底部导航栏中间突出

lintai

类似这底部导航栏中间突出来的怎么做，求思路

OSChina

给你几种方案：
1、原生模块。缺点：很多东西无法定制，受制于人。优点：简单快捷

2、中间内容部分和底部导航共用一个frame，然后用 position:fixed 固定底部导航。缺点：用起来肯定各种不爽，所以我直接没去尝试


下面两种方案提到的颜色是指上图：


3、底部导航用一个frame来做，中间内容用一个frame，底部导航的高起始于灰色框的上边，底部导航frame做成透明的，中间内容部分frame的高结束于灰色框的下边，让两个frame重叠，再用 api.bringFrameToFront 接口把底部导航frame设置在内容frame的上层，这样就能从灰色部分透视到内容frame上。缺点：用户会认为灰色框可以操作到内容frame上的东西，实际那个地方是底部导航的frame。优点：复杂度适中，且可以各种自定义


4、方案3的进阶版（也是我项目中用的方案，但会比较复杂），首先底部导航用两个frame构成，一是红色框，二是绿色框，用 api.bringFrameToFront 接口把绿色frame框覆盖在红色frame框上，且居中。然后中间内容frame的高度结束于红色框的上边位置。这样就完美的解决了方案3中提到的缺点，但代码稍微会复杂些。

OSChina

这是我用方案4做的凸出式底部导航
中间那个圆播放时可以切换图片并且旋转，暂停时可以加一个蒙板上去，如果用原生模块就无法做出这些效果了。

tanjingwaini

使用 position:fixed  居中

tanjingwaini

模块也有这个功能

sugarcane

http://docs.apicloud.com/Client-API/Nav-Menu/tabBarMenu看看这个

lintai

OSChina 发表于 2016-10-14 00:18
这是我用方案4做的凸出式底部导航
中间那个圆播放时可以切换图片并且旋转，暂停时可以加一个蒙板上去， ...

哇塞 你这个项目的UI做的好好啊 感谢感谢 其实我也想到方法3这种做法 但是也觉得不太完美 所以跑上来求助 我觉得方法4真的很好

水木易安

OSChina 发表于 2016-10-14 00:03
给你几种方案：
1、原生模块。缺点：很多东西无法定制，受制于人。优点：简单快捷

好评!!!!!!!!!!!!

zhiuzun

OSChina 发表于 2016-10-14 00:18
这是我用方案4做的凸出式底部导航
中间那个圆播放时可以切换图片并且旋转，暂停时可以加一个蒙板上去， ...

好评

zhengjue

OSChina 发表于 2016-10-14 00:03
给你几种方案：
1、原生模块。缺点：很多东西无法定制，受制于人。优点：简单快捷

多谢大神指教，受益匪浅