UniApp 自定义底部菜单与 TabBar 实现方法

在 UniApp 开发中，自定义底部菜单与 TabBar 能显著提升用户体验和应用的交互性。以下将详细介绍其实现方法。

了解 TabBar 的基本配置。在 pages.json 文件中，有专门的 tabBar 字段用于设置底部菜单。例如，定义简单的 TabBar 样式：

{
    "tabBar": {
        "color": "#000000",
        "selectedColor": "#FF0000",
        "backgroundColor": "#FFFFFF",
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "static/icon/home.png",
                "selectedIconPath": "static/icon/home_selected.png"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "我的",
                "iconPath": "static/icon/mine.png",
                "selectedIconPath": "static/icon/mine_selected.png"
            }
        ]
    }
}

这里设置了 TabBar 的颜色、背景色，以及菜单项的页面路径、文本、图标等信息。

然而，有时默认的 TabBar 样式无法满足复杂的设计需求，这时就需要自定义底部菜单。可以在页面的 template 部分创建自定义菜单结构。比如：

<template>
    <view class="custom-tabbar">
        <view class="tab-item" v-for="(item, index) in tabBarList" :key="index" @click="switchTab(index)">
            <image :src="item.selected? item.selectedIconPath : item.iconPath"></image>
            <text :style="{ color: item.selected? selectedColor : color }">{{ item.text }}</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabBarList: [
                {
                    pagePath: "pages/home/home",
                    text: "首页",
                    iconPath: "static/icon/home.png",
                    selectedIconPath: "static/icon/home_selected.png",
                    selected: true
                },
                {
                    pagePath: "pages/mine/mine",
                    text: "我的",
                    iconPath: "static/icon/mine.png",
                    selectedIconPath: "static/icon/mine_selected.png",
                    selected: false
                }
            ],
            color: "#000000",
            selectedColor: "#FF0000"
        };
    },
    methods: {
        switchTab(index) {
            this.tabBarList.forEach((item, i) => {
                item.selected = i === index;
            });
            uni.switchTab({
                url: this.tabBarList[index].pagePath
            });
        }
    }
};
</script>

<style scoped>
.custom-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-item image {
    width: 20px;
    height: 20px;
    margin-bottom: 5px;
}

.tab-item text {
    font-size: 12px;
}
</style>

上述代码创建了一个自定义的底部菜单，通过 v-for 循环渲染菜单项，并在点击时切换页面和更新选中状态。

通过合理运用 UniApp 的 tabBar 配置与自定义菜单的方法，开发者能够打造出独具特色、功能强大的底部菜单，提升应用的整体品质。无论是简单的展示还是复杂的交互逻辑，都能轻松实现，为用户带来更好的使用体验。