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

时间：2023-03-31 16:31:55 vue.js

介绍在手机端开发项目时，标签栏TabBar和导航栏NavBar功能在很多场景下都是必不可少的。由于Nuxt项目需要用到类似咸鱼底凸起的导航效果，所以只能自己创建一个自定义的导航组件。如上图所示：项目中的示例效果是可以的，下面会详细说明实现方法。首先，您需要在组件目录中创建headerBar.vue和tabBar.vue页面。接下来，在plugins目录中新建一个componentsInstall.js文件并导入。Nuxt自定义导航条headerBarNuxt

保存

Nuxt自定义Tabbar组件

//tabbar点击事件handleTabbar(index){this.$toast('tabbarindexvalue:'+index);},也支持咸鱼养效果，只需配置dock:true属性即可支持根据项目需要自定义多个tab选项。'icon-face',text:'Face',dot:true,iconSize:'24px',},{//icon:'icon-tianjia',iconImg:'https://gw.alicdn.com/tfs/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png?getAvatar=1',text:'咸鱼',dock:true,dockBg:'#fb4e30',iconSize:'.64rem',},{icon:'icon-search',text:'search',},]"/>okey，基于Nuxt自定义仿咸鱼导航组件分享到这里，希望对大家有所帮助！！??最后来个Nuxt/Vue-基于自定义定义弹框组件https://segmentfault.com/a/1190000027085208

上一篇：前端面试宝典：vue核心知识

下一篇：伸手党系列一：vue路由守卫与页面登录权限控制设置方法

Nuxt-Vue仿咸鱼Tabbar凸起效果-vue自定义导航栏相关文章