uniapp中点击跳转到tabBar的页面

已于 2023-03-26 22:20:22 修改
阅读量2.6k 收藏 5
点赞数 1
文章标签： uni-app 前端
于 2023-03-26 22:19:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Working_hard_111/article/details/129785785
版权
文章讲述了在uniapp开发中遇到从Pages页面无法跳转到tabBar页面的问题，通过查阅官方文档，了解到使用switchTab方法可以实现正确跳转。问题解决的关键在于正确使用switchTab来切换到tabBar页面。

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

今天在工作中用到需要从pages页面点击按钮跳转到底部栏的tabBar页面中的情况

最初代码是这样写的，路径正确，微信开发者工具也没有报错，但就是页面不跳转

 后来经过阅读uniapp的官方文档，找到了从普通页面点击跳转至tabBar页面的方法：switchTab

话不多说，直接上代码，调用该方法后，就可以直接跳转啦 

说明uniapp页面跳转方式
祈澈菇凉
02-13 1724
在App.vue中定义过渡效果：</</transition;opacity;</在 UniApp 中，页面跳转是一个核心功能，通过多种方法实现页面间的导航。了解不同跳转方式的适用场景、参数传递方法以及注意事项，可以帮助开发者更有效地管理应用的页面结构。
uniapp 普通页面跳转到tabBar页面详解（附加代码+uni.switchTab使用）
xiaohua616的博客
08-14 3187
我想从一个普通页面跳转到tabBar中页面(`这里指的页面是：小程序中底部导航那几个图标点击后所对应的页面`)，一开始我使用的是`uni.navigateTo`，但是`跳转没有效果`，在网上搜索了一下，要使用`uni.switchTab来解决普通页面跳转到tabBar页面`，试了一下没有问题。
微信小程序（uniapp）自定义 TabBar
最新发布
Rocky_Time的博客
04-23 3067
隐藏原生 TabBar在pages.json文件中，将tabBar配置项设置为空或移除，从而隐藏原生 TabBar。创建自定义 TabBar 组件在项目中创建一个全局组件，用于渲染自定义的 TabBar。动态切换页面内容使用或方法切换页面，同时控制 TabBar 的选中状态。全局管理 TabBar 状态通过 Vuex 或全局变量管理当前选中的 TabBar 项，确保状态同步。
uni-app 跳转到指定的tab导航页面
jieruis的博客
10-28 4321
uniapp的页面跳转方法:uni.navigateTo
uniapp，跳转tabbar页面，并刷新页面
fu_miao_qi_lai的博客
05-31 1108
【代码】uniapp，跳转tabbar页面，并刷新页面。
uniapp 登陆成功后 跳到 tabBar页面
tengyuxin的博客
12-20 7321
整体思路 准备三个组件分别为login(登录页) 和 home 、mine是tabBar里面的两个页面， 点击login页按钮跳转到tabbar页面 技术关键点 1. uniapp的路由在page,json的配置方式 在官网tabBar是有tabbar的配置的，重点是如何融入进page.json （1）tabbar的基本配置 "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "bor.
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
uniapp小程序自定义动态tabbar
04-08
- 引入并使用自定义TabBar组件：在需要使用TabBar的页面中引入并注册组件，然后在页面模板中使用。 ```html <!-- 页面内容 --> <tabbar></tabbar> import Tabbar from '@/components/tabbar.vue'; export...
uniapp 登录页面跳转到tabbar页面
06-02
2. 在tabbar页面中，需要在页面配置文件（如pages.json）中设置tabBar属性，指定底部菜单栏的样式和功能。例如： ``` { "tabBar": { "color": "#999", "selectedColor": "#007aff", "backgroundColor": "#f7f7...
uniapp带参数跳转到tabbar页面
04-28
可以使用uni.navigateTo和uni.switchTab方法来实现带参数跳转到tabbar页面。 首先，在非tabbar页面使用uni.navigateTo方法跳转到tabbar...注意：使用uni.switchTab方法切换页面时，只能跳转到tabbar页面中定义的页面。
uni-app框架 tabBar（底部导航）创建的方法与外界跳转
01-20
在uni-app中，如果你需要从外界（例如其他组件或者API调用）跳转到TabBar页面，需要使用特定的API方法，因为直接使用`navigateTo`或`redirectTo`可能不会正常工作。对于TabBar页面之间的切换，推荐使用`switchTab`...
uni-app 页面跳转方式
modaoshi51991的博客
01-10 204
uni.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。仅适用于带有 tabBar 的页面。uni.navigateTo：保留当前页面，跳转到应用内的某个页面。用户可以通过返回按钮回到原页面。uni.redirectTo：关闭当前页面，跳转到应用内的某个页面。用户不能通过返回按钮回到原页面。uni.reLaunch：关闭所有页面，打开到应用内的某个页面。
uniapp tabBar的跳转
weixin_44064275的博客
04-11 765
uniapp tabBar的跳转 1.在不含有 tabBar 的页面跳转到 含有 tabBar 的页面 uni.switchTab() 2.在含有 tabBar 的页面跳转到 不含有 tabBar 的页面 uni.reLaunch() 3.普通跳转 uni.navigateTo()
UNIAPP----uniapp里面页面跳转如何到tabbar页面
weixin_44126737的博客
07-17 5164
在uniapp里面，页面跳转和微信小程序很相似。普通跳转到tabbar页面不报错。 跳转到普通页面： 定义点击事件 定义跳转地址 跳转tabbar页面： 只需将uni.navigateTo({ }); 更改为uni.switchTab({ });即可。 ...
uniapp：tabBar页面如何跳转？
1111111111
04-24 1万+
首先我们在pages.json里配置好tabBar // 需要注意，使用了tabBar后，页面跳转就得用switchTab，不能再用redirectTo和navigateTo了 "tabBar": { "color": "#a9b7b7", "selectedColor": "#d4237a", "borderStyle": "white", "list": [{ "selectedIconPath": "./static/icon/home.png", "iconPa
uniapp跳转页面有几种方法？
baifangfang521的博客
04-26 7886
等。
【uniapp小程序】路由跳转navigator传参封装
热门推荐
qq_49002903的博客
11-29 4万+
在实际应用开发中我们经常要使用到路由跳转，在uniapp官网中，提供了navigator内置组件，供我们使用。navigator页面跳转。页面跳转。该组件类似HTML中的组件，但只能跳转本地页面。目标页面必须在pages.json中注册。该组件的功能有API方式，另见：https://uniapp.dcloud.io/api/router?属性说明属性名类型默认值说明平台差异说明urlString。
8.uniapp实现跳转页面，tabbar页面，对应页面接收参数
m0_56986233的博客
05-07 5415
1.绑定点击事件 <view class="sugg-list" v-if="SearchLists.length !== 0"> <view class="sugg-item" v-for="(item, i) in SearchLists" :key="i" @click="gotoDetail(item.goods_id)"> <view class="goods-name">{{item.goods_name}}&
学习笔记 （5） uni-app 中的导航跳转
2401_84446882的博客
05-02 421
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值