引言在手机端项目开发时,很多场景下标签栏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组件
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