html 底部导航栏中间凸起效果源码,底部菜单栏实现凸起效果（流畅无模块）

这是UI想要的底部菜单栏的效果图。

一开始我是用NavTabBar这个模块来实现的，样式可以实现，但是来回切换点击的效果非常不好。

后来又重新抛弃了模块，用两个frame来实现了这个效果，代码如下：

第一个页面正常的写上一个frameGroup

html:

               

               

{ { item.name }}

js:

api.openFrameGroup({

name: 'IndexGroup',

background: 'rgba(0,0,0,0)',

scrollEnabled: false,

preload: 1,

rect: {

x: 0,

y: 0,

w: api.winWidth,

h: api.winHeight - 51

},

index: 0,

frames: [

{

name: 'index',

url: './views/index.html',

bgColor: 'bgcolor',

bounces: true,

//useWKWebView: true

}, {