uni-app自定义tabbar

最新推荐文章于 2025-06-27 06:30:00 发布

原创

最新推荐文章于 2025-06-27 06:30:00 发布 · 304 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

本文介绍了如何在uni-app中实现自定义tabbar，包括在components中创建tabbar.vue组件，app.vue的onLaunch函数配置，pages.json的tabbar设置以及在页面中引用组件的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

代码，直接复制即可使用

在components文件里创建tabbar.vue

<template>
    <view class="tabbar">
        <view class="navigator">
            <view class="navigator-item" v-for="(item, index) in tabBar.list" :key="item.pagePath"
                @click="switchTab(item, index)">
                <img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
                <img :src="item.selectedIconPath" class="icon" v-else>
                <text :class="['item-text', { 'text-active': selectedIndex === index }]">{
  
  { item.text }}</text>
            </view>
        </view>
    </view>
</template>
 
<script>
export default {
    data() {
        return {
            selectedIndex: uni.getStorageSync('selectedIndex') || 0