关于小程序中点击跳转至Tabbar栏页面无反应

学了忘忘了学学了还得忘

于 2021-05-21 17:42:03 发布

阅读量913

点赞数

CC 4.0 BY-SA版权

分类专栏：踩坑小笔记微信小程序文章标签： vue 小程序

本文链接：https://blog.youkuaiyun.com/weixin_49329762/article/details/117129018

踩坑小笔记同时被 2 个专栏收录

5 篇文章

订阅专栏

微信小程序

3 篇文章

订阅专栏

本文主要讨论了在小程序中遇到点击购物车按钮无法跳转至Tabbar中购物车页面的问题。问题源于使用了wx.navigateTo，而正确的做法是使用wx.switchTab来跳转到tabbar页面。解决方案是将navigator组件的open-type属性改为'switchTab'。

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

想点击购物车按钮跳转至 tabbar 中的购物车页面却没有反应

源代码：

<navigator url="/pages/cart/cart" class="icon_btn">
	<view class="iconfont icon-gouwuche"></view>
	<text class="icon_btn_text">购物车</text>
</navigator>

在这里插入图片描述
原因：
navigator 中的 open-type（跳转方式）属性默认值是 navigate （对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能）

而在开放文档中 wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

如果需要跳转至 tabbar 页面，可用 wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

解决方法：
将 navigator 中 open-type 的属性值设置为 switchTab 即可。

<navigator url="/pages/cart/cart" open-type="switchTab" class="icon_btn">
	<view class="iconfont icon-gouwuche"></view>
	<text class="icon_btn_text">购物车</text>
</navigator>