APICloud开发者进阶之路|[底部导航栏凸出效果]NVTabBar模块和framegroup完美结合双端
1.效果图请看最下方,如果凸出图片想和底部颜色一致有那种描边的效果,需要自行设计图片,比如在这个钻石图片基础上的上半圆外层加一个半圆描边,增加点边距,边距内层背景颜色和底部导航栏颜色一致即可。具体自己脑补。
2.此demo和NVTabBar模块文档里面给的例子不同之处在于:
1). 本demo对应用的framegruop,解决了很多问题,不用每次openframe之后再调用一次NVTabBar.bringToFront()把模块设置成不被阻挡,此demo只需要设置一次就可以了.
2). 兼容了ios和安卓两端,ios是用ip6plus测试的,完美兼容。
3).模块例子如果直接openframe还会有一个bug,就是切换的时候,底部是后出来的,所以底部会有闪的效果,但是这个demo都解决了。
3.实现代码在demo目录下的index.html,代码有很详细的注释用途,如有不明白请跟帖。
4.图片资源都在image里面了
![](https://ask8088-private-1251520898.cn-south.myqcloud.com/developer-images/article/4235962/utjf8mp2t5.png?q-sign-algorithm=sha1&q-ak=AKID2uZ1FGBdx1pNgjE3KK4YliPpzyjLZvug&q-sign-time=1585293563;1585300763&q-key-time=1585293563;1585300763&q-header-list=&q-url-param-list=&q-signature=acaa0fb5d46f6c9224957394559b71f8a642f9c3)
![](https://ask8088-private-1251520898.cn-south.myqcloud.com/developer-images/article/4235962/k83rvw8fkt.png?q-sign-algorithm=sha1&q-ak=AKID2uZ1FGBdx1pNgjE3KK4YliPpzyjLZvug&q-sign-time=1585293563;1585300763&q-key-time=1585293563;1585300763&q-header-list=&q-url-param-list=&q-signature=1252c9c0cb7585c48e387ff8d3fcb0c6725b8139)