uniapp中自定义tabbar无法跳转?如何解决

🏆本文收录于「Bug调优」专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!

问题描述

uniapp中自定义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>

如上问题有来自我自身项目开发,有的收集网站,有的来自读者,如有侵权,立马删除。

解决方案

  如下是上述问题的解决方案,仅供参考:

  根据如上提供的代码,自定义的tabbar组件看起来是正确的,而且TabBar方法中使用了uni.switchTab来进行页面跳转。如果你发现点击tabbar无法跳转页面,可能的原因有:

  1. 页面路径不正确
    确保pagePath属性中的页面路径是正确的。路径应该与实际的页面文件位置相匹配,并且使用正确的文件扩展名(如.vue)。

  2. 页面未在pages.json中声明
    pages.json文件中声明所有的页面路径,确保uni.switchTab可以找到并跳转到正确的页面。

  3. 自定义组件未正确引用
    确保在页面中正确引用了自定义的tabbar组件。在你的代码中,<tab-Bar :current="0"></tab-Bar>看起来是正确的,但是你需要确保tabBar组件的名称和pages.json中的页面路径相匹配。

  4. 页面跳转逻辑问题
    如果你的页面中有其他逻辑(如条件渲染或动态数据绑定)可能会影响页面跳转,检查是否有任何逻辑阻止了uni.switchTab的执行。

  5. 自定义组件的current prop未正确传递
    确保current prop的值能够正确地传递到自定义tabbar组件中。你可能需要在父组件中跟踪当前页面的索引,并将其传递给tabbar组件。

  6. 开发者工具或编译问题
    尝试清除项目缓存并重新编译,有时候开发者工具的缓存或者编译问题可能会导致无法正确预览页面跳转。

  7. 检查控制台错误
    在开发者工具的控制台中查看是否有任何错误信息,这可能会提供一些关于问题的线索。

  如果以上步骤都无法解决问题,你可以尝试创建一个简单的自定义tabbar示例,只包含最基本的跳转逻辑,看看是否能够正常工作。如果可以,那么问题可能与你的具体实现有关,需要进一步调试。如果仍然不行,可能需要检查你的项目配置或者寻求社区的帮助。

  希望能够帮到有需要的你。

  PS:如若遇到采纳如下方案还是未解决的同学,希望不要抱怨&&急躁,毕竟影响因素众多,我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴,即把你未解决或者产生新Bug黏贴在评论区,我们大家一起来努力,一起帮你看看,可以不咯。

  若有对当前Bug有与如下提供的方法不一致,有个不情之请,希望你能把你的新思路或新方法分享到评论区,一起学习,目的就是帮助更多所需要的同学,正所谓「赠人玫瑰,手留余香」。

☀️写在最后

  ok,以上就是我这期的Bug修复内容啦,如果还想查找更多解决方案,你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」,都是实战中碰到的Bug,希望对你有所帮助。到此,咱们下期拜拜。

码字不易,如果这篇文章对你有所帮助,帮忙给bugj菌来个一键三连(关注、点赞、收藏) ,您的支持就是我坚持写作分享知识点传播技术的最大动力。

同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ;以第一手学习bug菌的首发干货,不仅能学习更多技术硬货,还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料,你想要的我都有!

📣关于我

我是bug菌,CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家,C站博客之星Top30,华为云2023年度十佳博主,掘金多年度人气作者Top40,51CTO年度博主Top12,掘金/InfoQ/51CTO等社区优质创作者;全网粉丝合计 20w+;硬核微信公众号「猿圈奇妙屋」,欢迎你的加入!免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料,你想要的我都有,关键是你不来拿。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/525449.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

0基础如何进入IT行业?一文揭秘成功蜕变之路!|TodayAI

一、引言 在数字化转型的浪潮下&#xff0c;IT行业的魅力日益增强&#xff0c;吸引了大量跨领域人才的关注。然而&#xff0c;对于那些零基础的人来说&#xff0c;进入这个充满机遇和挑战的领域似乎是一条充满未知和困难的道路。本文旨在探讨零基础者如何通过有效的学习路径、…

1688详情API接口:解锁多元化应用场景java php c++

随着互联网的快速发展&#xff0c;数据交换和信息共享已成为企业日常运营不可或缺的一部分。在这样的背景下&#xff0c;API&#xff08;应用程序接口&#xff09;接口作为实现数据互通的重要工具&#xff0c;受到了越来越多企业的青睐。1688详情API接口作为阿里巴巴旗下的重要…

Games101Homework【6】Acceleration structure(Including framework analysis)

Code Analysis&#xff1a; friend&#xff1a; C中友元&#xff08;友元函数和友元类&#xff09;的用法和功能_friend class a<b>-CSDN博客 [C&#xff1a;不如Coding]&#xff08;11&#xff09;&#xff1a;友元函数与友元类_哔哩哔哩_bilibili Here is a simple…

C++模仿qq界面

#include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//设置窗口的大小this->resize(645,497);//设置窗口名字this->setWindowTitle("QQ");//设置窗口图标this->setWindowIcon(QIcon("C:\\zhouzhouMyfile\\qt_proj…

C语言结构体大小

1、结构体成员类型 结构体成员的类型&#xff0c;不同的结构体成员占用的内存大小不同 2、结构体对齐 为了提高内存访问的效率&#xff0c;编译器会对结构体进行对齐。对齐的方式是按照成员的类型和顺序来进行的。对齐的目的是为了让结构体成员的地址能够被整除&#xff0c;从…

✌2024/4/3—力扣—字符串转换整数

代码实现&#xff1a; int myAtoi(char *str) {long ret 0;int flag 1; // 默认正数// 去除空格及判断符号位while (*str ) {str;}if (*str -) {flag -1;str;} else if (*str ) {str;}// 排除非数字的情况if (*str < 0 || *str > 9) {return 0;}while (*str > …

[C++][算法基础]堆排序(堆)

输入一个长度为 n 的整数数列&#xff0c;从小到大输出前 m 小的数。 输入格式 第一行包含整数 n 和 m。 第二行包含 n 个整数&#xff0c;表示整数数列。 输出格式 共一行&#xff0c;包含 m 个整数&#xff0c;表示整数数列中前 m 小的数。 数据范围 1≤m≤n≤&#x…

真实的招生办对话邮件及美国高校官网更新的反 AI 政策

这两年 ChatGPT 的热度水涨船高&#xff0c;其编写功能强大&#xff0c;且具备强大的信息整合效果&#xff0c;所以呈现的内容在一定程度上具备可读性。 那么&#xff0c;美国留学文书可以用 ChatGPT 写吗&#xff1f;使用是否有风险&#xff1f;外网博主 Kushi Uppu 在这个申…

C++ vector顺序表模拟实现

目录 前言&#xff1a; 模拟实现&#xff1a; 构造函数&#xff1a; 析构函数&#xff1a; 容量调整&#xff08;reserve&#xff09;&#xff1a; resize函数&#xff1a; 尾插&#xff08;push_back&#xff09;: 尾删&#xff08;pop_back&#xff09;: 插入&#xff…

基于Spring boot+Vue的业余排球俱乐部会员管理系统

5 系统功能模块的具体实现 5.1超级会员角色 5.1.1 登录 超级管理员登录通过用户名和密码去数据库查询用户表&#xff0c;该名称是否在用户表中存在&#xff0c;如果存在&#xff0c;则通过用户名和密码查询密码是否正确&#xff0c;然后吧用户的信息存在jwt的负载里&#xf…

表1和表2怎么查找相同的内容?3种实用技巧赶紧学起来

-- 为啥会感觉给不了一个人幸福&#xff0c;而选择分开不打扰&#xff1f; 核对不同工作表中的数据&#xff0c;是大家在处理工作表时会遇到的高频场景&#xff0c;这篇文章跟大家分享一下如何查找不同工作表中的相同内容。 比对数据的方法有很多&#xff0c;这里跟大家分享3种…

LangChain - OpenGPTs

文章目录 MessageGraph 消息图认知架构AssistantsRAGChatBot 持久化配置新模型新工具astream_events总结 关键链接&#xff1a; OpenGPT GitHub 存储库YouTube 上的 OpenGPT 演练LangGraph&#xff1a;Python、JS 两个多月前&#xff0c;在 OpenAI 开发日之后&#xff0c;我们…

二维码门楼牌管理应用平台建设:打造便民服务热线新生态

文章目录 前言一、二维码门楼牌管理应用平台概述二、便民热线服务的构建三、便民热线服务的优势四、便民热线服务的潜在价值五、总结与展望 前言 随着信息技术的飞速发展&#xff0c;二维码门楼牌管理应用平台的建设已成为城市智慧化建设的重要组成部分。这一平台不仅为居民提…

区块链技术与数字身份:解析Web3的身份验证系统

在数字化时代&#xff0c;随着个人数据的日益增多和网络安全的日益关注&#xff0c;传统的身份验证系统面临着越来越多的挑战和限制。在这种背景下&#xff0c;区块链技术的出现为解决这一问题提供了全新的思路和解决方案。Web3作为一个去中心化的互联网模式&#xff0c;其身份…

MySQL学习笔记------多表查询

目录 多表关系 一对多 多对多 一对一 多表查询 概述 分类 内连接&#xff08;交集&#xff09; 隐式内连接 显式内连接 ​编辑 外连接&#xff08;from后为左表&#xff0c;join后为右表&#xff09; 左外连接 右外连接 自连接 联合查询&#xff08;union&#…

APP的UI设计规范

APP的设计规范是一系列原则和标准&#xff0c;旨在确保应用程序提供一致、易用且美观的用户体验。以下是一些关键的APP设计规范。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.一致性&#xff1a; 保持界面元素和交互行为的一致性…

Sketch是免费软件吗?这款软件支持导入!

Sketch 是一款针对网页、图标、插图等设计的矢量绘图软件。Sketch 的操作界面非常简单易懂&#xff0c;帮助全世界的设计师创作出许多不可思议的作品。但是同时&#xff0c;Sketch 也有一些痛点&#xff1a;使用 Sketch 需要安装 InVision、Abstract 、Zeplin 等插件&#xff0…

【LeetCode: 455. 分发饼干 + 贪心】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

Docker 引擎离线安装包采集脚本

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…

鼠标不动N秒,电脑自动待机睡眠V1.0

鼠标不动N秒&#xff0c;电脑自动待机睡眠V1.0 开发背景&#xff1a;因为不关电脑多次被罚款&#xff0c;所以下决心做一个自动待机睡眠软件 win系统自带的睡眠小程序&#xff0c;在电脑正在运行其它程序时&#xff0c;只能关闭屏幕而不是电脑待机。 为了电脑深度睡眠待机&a…