uniapp如何公用一个底部菜单

1. 简介

在开发uniapp应用时，不同页面之间可能需要共用一个底部菜单，当点击不同菜单时，应该对应不同的页面。在这篇文章中，我们将介绍如何在uniapp中实现共用底部菜单的功能。

2. 实现步骤

2.1 创建底部菜单组件

首先，我们需要先创建一个底部菜单组件，用于在不同页面中共用。可以通过以下代码来创建：

<template>
    <div class="tab-bar">
        <div class="tab-bar__item" @click="navigateTo('home')" :class="{active: active === 'home'}">
            <i class="iconfont icon-home"></i>
            <span>首页</span>
        </div>
        <div class="tab-bar__item" @click="navigateTo('cart')" :class="{active: active === 'cart'}">
            <i class="iconfont icon-cart"></i>
            <span>购物车</span>
        </div>
        <div class="tab-bar__item" @click="navigateTo('user')" :class="{active: active === 'user'}">
            <i class="iconfont icon-user"></i>
            <span>我的</span>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            active: String
        },
        methods: {
            navigateTo(name) {
                uni.switchTab({
                    url: `/pages/${name}/${name}`
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: #FFF;
        border-top: 1px solid #E6E6E6;
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
        .tab-bar__item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #333;
            i {
                font-size: 20px;
            }
            &.active {
                color: #FF9800;
            }
        }
    }
</style>

代码中，我们创建了一个名为tab-bar的组件，其中包含三个tab-bar__item元素，分别表示“首页”、“购物车”和“我的”三个菜单项。通过active属性可以设置当前选中的菜单项，通过navigateTo方法来处理点击菜单项后的跳转事件。在底部菜单组件中，我们还可以添加CSS样式来美化样式。

2.2 在index页面中使用底部菜单组件

接下来，我们需要在index页面中使用底部菜单组件，以完成底部菜单的展示。可以通过以下代码来完成：

<template>
    <div>
        <tab-bar active="home"></tab-bar>
        <view class="content">
            <p>这是首页页面</p>
            <p>欢迎来到我的uniapp应用！</p>
        </view>
    </div>
</template>
<script>
    import TabBar from '@/components/tab-bar/tab-bar.vue'
    export default {
        components: {
            TabBar
        }
    }
</script>
<style>
    .content {
        margin-bottom: 50px;
    }
</style>

在代码中，我们通过“<tab-bar active="home"></tab-bar>”来插入底部菜单组件，并通过“import TabBar from '@/components/tab-bar/tab-bar.vue'”来将组件引入到当前页面中。下面的view元素中包含了一些简单的页面内容，展示了该页面的基本信息。每个页面底部都需要添加一个margin-bottom:50px的样式，用于防止内容被底部菜单遮挡。

2.3 在其他页面中使用底部菜单组件

接下来，我们需要在其他页面中使用底部菜单组件。可以通过以下代码来完成：

<template>
    <div>
        <tab-bar active="cart"></tab-bar>
        <view class="content">
            <p>这是购物车页面</p>
            <p>您的购物车里没有任何物品！</p>
        </view>
    </div>
</template>
<script>
    import TabBar from '@/components/tab-bar/tab-bar.vue'
    export default {
        components: {
            TabBar
        }
    }
</script>
<style>
    .content {
        margin-bottom: 50px;
    }
</style>

在代码中，我们通过“<tab-bar active="cart"></tab-bar>”来插入底部菜单组件，并设置默认选中的菜单项为“购物车”，展示了该页面的基本信息。在这个页面中，内容与前一个页面有些不同，它展示了购物车页面的基本信息。同样，在这个页面中，我们也需要添加margin-bottom:50px的样式。

2.4 页面跳转处理

到目前为止，我们已经完成了底部菜单的创建和展示，但是通过点击底部菜单来实现页面跳转的功能还没有实现。这里，我们需要在tab-bar组件中添加navigateTo方法，用于处理页面跳转事件。可以通过以下代码来实现：

<template>
    <div class="tab-bar">
        <div class="tab-bar__item" @click="navigateTo('home')" :class="{active: active === 'home'}">
            <i class="iconfont icon-home"></i>
            <span>首页</span>
        </div>
        <div class="tab-bar__item" @click="navigateTo('cart')" :class="{active: active === 'cart'}">
            <i class="iconfont icon-cart"></i>
            <span>购物车</span>
        </div>
        <div class="tab-bar__item" @click="navigateTo('user')" :class="{active: active === 'user'}">
            <i class="iconfont icon-user"></i>
            <span>我的</span>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            active: String
        },
        methods: {
            navigateTo(name) {
                uni.switchTab({
                    url: `/pages/${name}/${name}`
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: #FFF;
        border-top: 1px solid #E6E6E6;
        box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
        .tab-bar__item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #333;
            i {
                font-size: 20px;
            }
            &.active {
                color: #FF9800;
            }
        }
    }
</style>

在代码中，我们在tab-bar组件中添加了navigateTo方法，用于处理页面跳转事件。在方法中，我们使用uni.switchTab方法来跳转到对应的页面，该方法可以跳转到tabBar中的页面，并将页面路径设置为/pages/${name}/${name}。这里，name即为通过点击菜单项跳转到的页面路径。要注意的是，uni.switchTab方法只能跳转到tabBar中的页面，如果需要跳转到非tabBar的页面，则需要使用uni.navigateTo方法。

3. 总结

以上就是在uniapp中公用底部菜单的实现步骤，通过底部菜单组件的创建和页面中的引用，可以实现快速并且简便地完成底部菜单功能的开发。这给开发者带来了很大的便利性，可以让开发者更加专注于应用程序的业务逻辑开发。