uniapp中自定义tabbar无法跳转

Question

参照这则帖子自定义tabbar

尝试了一下自己做自定义tabbar，但是发现无法根据点击来跳转页面。

下面附上两段相关代码，第一段是自定义的tabbar，第二段是页面引用tabbar片段。

希望有人能帮忙看看到底是哪里出了问题，这里先谢谢了。

<template>
    <view class="index">
        <view class="tabBar">
            <view class="TaBa">
                <view class="Tablist" v-for="(item,index) in tabBar.list" :key="index" @click="TabBar(item,index)">
                    <view class="tabimg">
                        <image :src="current === index?item.selectedIconPath:item.iconPath"></image>
                    </view>
                    <view :class="current === index?'TextColor':'Text'">
                        {{item.text}}
                    </view>
                </view>
            </view>
            <view class="TabBton">
                <view class="Vido">
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "tabBar",
        //接收自定义tabar组件页面的标识 用来判断是否当前点击页面
        props: {
            current: Number
        },
        data() {
            return {
                tabBar: {
                    list: [{
                            pagePath: "/pages/outdex/outdex.vue",
                            iconPath: "/static/team.png",//这个放置未点击时的图片
                            selectedIconPath: "/static/team_select.png",//这个放置点击时的图片 
                            text: "团队"
                        },
                        {
                            pagePath: "/pages/notice/notice.vue",
                            iconPath: "/static/notice.png",
                            selectedIconPath: "/static/notice_select.png",
                            text: "通知"
                        },
                        {
                            pagePath: "/pages/ume/ume.vue",
                            iconPath: "/static/mine.png",
                            selectedIconPath: "/static/mine_select.png",
                            text: "个人"
                        }
                    ]
                },
            };
        },
        methods: {
            //底部tab跳转
            TabBar(item, index) {
                uni.switchTab({
                    url: item.pagePath
                })
            }
        }
    }
</script>

<style lang="scss">
    page {
        height: 100%;
        background-color: #F1F1F1;
    }
    .index {
        width: 100%;
 
        .tabBar {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 140rpx;
            background: #f8f8f8;
            box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .TaBa {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .Tablist {
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    justify-content: center;
                    .tabimg {
                        display: flex;
                        align-items: center;
                        justify-content: cen

<view class="index">
    <tab-Bar :current="0"></tab-Bar>
</view>

Answer 1

引自免费微信小程序：皆我百晓生

在您的UniApp项目中，您遇到了自定义tabBar无法正确跳转的问题。根据您提供的代码片段，我发现了几个可能影响功能实现的因素。以下是针对这些问题提出的解决方案及调整后的代码：

问题1：事件绑定与方法调用

在<tab-Bar>组件中，您为每个<view class="Tablist">元素绑定了@click事件，并期望调用TabBar方法。然而，您在方法名前没有添加.（点）以表示这是一个组件实例的方法。修正这个问题：

<!-- 在自定义tabBar组件模板内 -->
<view class="Tablist" v-for="(item,index) in tabBar.list" :key="index" @click="TabBar(item,index)">
<!-- 更改为 -->
<view class="Tablist" v-for="(item,index) in tabBar.list" :key="index" @click=".TabBar(item,index)">

问题2：组件名称大小写不一致

您在引用自定义tabBar组件时使用了全大写的<tab-Bar>标签，而在实际组件文件中定义的是小写开头的name: "tabBar"。确保引用时的组件名称与定义时保持一致：

<!-- 在引用tabBar的页面模板内 -->
<view class="index">
    <tab-Bar :current="0"></tab-Bar>
</view>
<!-- 更改为 -->
<view class="index">
    <tabbar :current="0"></tabbar>
</view>

问题3：页面路由切换逻辑

在TabBar方法内部，您使用了uni.switchTab进行页面切换。但需要注意的是，switchTab适用于已注册到pages.json中的 tabBar 页面间的切换。确认您的目标页面路径（如/pages/outdex/outdex.vue、/pages/notice/notice.vue和/pages/ume/ume.vue）已在pages.json的tabBar配置项中正确设置。

若这些页面不是全局 tabBar 页面，而是普通页面，则应使用uni.navigateTo或uni.reLaunch进行跳转。例如：

methods: {
  TabBar(item, index) {
    uni.navigateTo({ url: item.pagePath });
  }
}

总结：

按照上述建议调整您的代码后，自定义tabBar应该能够正常响应点击并跳转至相应页面。请检查pages.json中tabBar配置以及目标页面路径，确保它们与组件内的页面路径匹配。同时，注意组件名称和方法调用的一致性，以及选择合适的页面路由切换方法。如果您仍有问题，欢迎继续提问。