关于vue.js:NuxtVue仿咸鱼Tabbar凸起效果vue自定义导航栏

引言

在手机端我的项目开发时，很多场景下标签栏 TabBar 和导航栏 NavBar 性能必不可少。因为 Nuxt 我的项目中须要用到相似咸鱼底部凸起导航成果，只能本人入手造一个自定义导航组件。

如上图：在我的项目中实例成果

ok，上面就具体解说下实现办法。

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

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

Nuxt 自定义导航条 headerBar

<template>
    <div class="header-bar" :class="{'fixed': fixed,'transparent fixed': transparent}">
        <div class="header-bar__wrap flexbox flex-alignc" :style="{'background': bgcolor,'color': color,'z-index': zIndex}">
            <!-- >> 返回 -->
            <div class="action hdbar-action__left isback" v-if="back && back!='false'"@click="$router.go(-1)">
                <slot name="backIco" /><slot name="backText" />
            </div>
 
            <!-- >> 题目 -->
            <div class="hdbar-title" :class="{'center': center}">
                <slot name="title" />
            </div>
 
            <!-- >> 搜寻框 -->
            <div class="action hdbar-action__search">
                <slot name="search" />
            </div>
 
            <!-- >> 右侧 -->
            <div class="action hdbar-action__right">
                <slot name="right" />
            </div>
        </div>
    </div>
</template>

<script>
/**
 * @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: {},}
</script>

<header-bar :back="true" :bgcolor="linear-gradient(to right, #f726ff, #2acfff)" color="#ff0" center transparent>
    <template #backIco><i class="iconfont icon-close"></i></template>
 
    <div slot="title">
    <img src="~/assets/img/logo.png" height="14" /> <em>Nuxt</em>
    </div>
 
    <div slot="right" class="ml-20" @click="$toast(' 搜寻~~')"><i class="iconfont icon-search"></i></div>
    <div slot="right" class="ml-20"><i class="iconfont icon-choose"></i></div>
    <div slot="right" class="ml-20"><van-button type="primary" size="mini" @click="saveData"> 保留 </van-button></div>
</header-bar>

<header-bar :back="true" bgcolor="linear-gradient(to right, #6126ff, #ff21ee)" color="#ff0" center>
    <div slot="backIco"><i class="iconfont icon-close"></i></div>
    <div slot="search" class="flex-c flex1">
        <input class="ipt flex1" placeholder="搜寻关键字..." />
    </div>
    <div slot="right" class="ml-30"> <i class="iconfont icon-shoucang"></i></div>
    <div slot="right" class="ml-30"> <i class="iconfont icon-female"></i></div>
</header-bar>

Nuxt 自定义 Tabbar 组件

<template>
    <div class="tab-bar" :class="{'fixed': fixed}">
        <div class="tab-bar__wrap flexbox flex-alignc" :style="{'background': bgcolor}">
            <div v-for="(item,index) in tabs" :key="index" class="navigator" :class="currentTabIndex == index ?'on':''" @click="switchTabs(index, item)">
                <div class="ico" :class="{'dock': item.dock}">
                    <i v-if="item.dock" class="dock-bg" :style="{'background': item.dockBg ? item.dockBg : activeColor}"></i>
                    <i v-if="item.icon" class="iconfont" :class="item.icon" :style="{'color': (currentTabIndex == index && !item.dock ? activeColor : color),'font-size': item.iconSize}"></i>
                    <img v-if="item.iconImg" class="iconimg" :src="currentTabIndex == index && !item.dock ? item.selectedIconImg : item.iconImg" :style="{'font-size': item.iconSize}" />
                    <em v-if="item.badge" class="nuxt__badge">{{item.badge}}</em>
                    <em v-if="item.dot" class="nuxt__badge-dot"></em>
                </div>
                <div class="txt" :style="{'color': (currentTabIndex == index ? activeColor : color)}">{{item.text}}</div>
            </div>
        </div>
    </div>
</template>

<script>
  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)
            }
        }
    },
  }
</script>

<tab-bar bgcolor="#b6ffff" @click="handleTabbar" :tabs="[
    {
        icon: 'icon-tianjia',
        text: 'Home',
    },
    {
        icon: 'icon-shezhi',
        text: 'Manage',
        badge: 1
    },
    {
        icon: 'icon-male',
        text: 'Ucenter',
        dot: true
    },
    ]"
/>

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

另外还反对咸鱼凸起成果，只需配置 dock: true 属性即可。依据我的项目须要反对自定义多个 tab 选项。

<tab-bar bgcolor="#7fa1ff" color="#fff" activeColor="#fb4e30" :tabs="[
    {
        icon: '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: '搜寻',
    },
    ]"
/>

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

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