Nuxt/Vue仿咸鱼Tabbar凸起效果|vue自定义导航栏

引言

在手机端项目开发时，很多场景下标签栏TabBar和导航栏NavBar功能必不可少。由于Nuxt项目中需要用到类似咸鱼底部凸起导航效果，只能自己动手造一个自定义导航组件。

如上图：在项目中实例效果

ok，下面就详细讲解下实现方法。

首先，需要在components目录下新建 headerBar.vue 和 tabBar.vue 页面。

紧接着，在 plugins 目录下新建 componentsInstall.js 文件并引入即可。

Nuxt自定义导航条headerBar

    
 
    

     Nuxt
    
 
    

    

    
保存

Nuxt自定义Tabbar组件

// tabbar点击事件
handleTabbar(index) {
    this.$toast('tabbar索引值：' + index);
},

另外还支持咸鱼凸起效果，只需配置 dock: true 属性即可。根据项目需要支持自定义多个tab选项。

okey，基于Nuxt自定义仿咸鱼导航组件就分享到这里。希望对大家有所帮助！！✍✍

最后附上一个基于Nuxt/Vue自定义弹框组件
https://segmentfault.com/a/1190000027085208