html 底部导航栏中间凸起效果源码,Nuxt/Vue仿咸鱼Tabbar凸起效果|vue自定义导航栏...

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

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

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

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

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

Nuxt自定义导航条headerBar

/**

* @Desc Vue自定义导航条headerBar

* @Time andy by 2020-10-06

* @About Q：282310962 wx：xy190310

*/

export default {

props: {

// 是否返回

back: { type: [Boolean, String], default: true },

// 标题

title: { type: String, default: '' },

// 标题颜色

color: { type: String, default: '#fff' },

// 背景颜色

bgcolor: { type: String, default: '#22d59c' },

// 标题是否居中

center: { type: [Boolean, String], default: false },

// 搜索框

search: { type: [Boolean, String], default: false },

// 是否固定

fixed: { type: [Boolean, String], default: false },

// 背景透明

transparent: { type: [Boolean, String], default: false },

// 设置层级

zIndex: { type: [Number, String], default: '2021' },

},

data() {

return {}

},

methods: {},

}

Nuxt

保存

Nuxt自定义Tabbar组件

{{item.badge}}

{{item.text}}

export default {

props: {

current: { type: [Number, String], default: 0 },

// 背景颜色

bgcolor: { type: String, default: '#fff' },

// 颜色

color: { type: String, default: '#999' },

// 点击后颜色

activeColor: { type: String, default: '#22d59c' },

// 是否固定

fixed: { type: [Boolean, String], default: false },

// tab选项

tabs: {

type: Array,

default: () => null

}

},

data() {

return {

currentTabIndex: this.current

}

},

created() {

const _pagePath = this.$route.path

this.tabs.map((val, index) => {

if(val.pagePath == _pagePath) {

this.currentTabIndex = index

}

})

},

methods: {

switchTabs(index, item) {

this.currentTabIndex = index

this.$emit('click', index)

if(item.pagePath) {

this.$router.push(item.pagePath)

}

}

},

}

/>// tabbar点击事件

handleTabbar(index) {

this.$toast('tabbar索引值：' + index);

},

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

/>

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

最后附上一个基于Nuxt/Vue自定义弹框组件

https://segmentfault.com/a/1190000027085208

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[Nuxt/Vue仿咸鱼Tabbar凸起效果|vue自定义导航栏]http://www.zyiz.net/tech/detail-147877.html