小程序跳转tabBar

最新推荐文章于 2024-07-20 14:41:34 发布

小胡仙

最新推荐文章于 2024-07-20 14:41:34 发布

阅读量669

点赞数

分类专栏：笔记文章标签： vue 小程序

本文链接：https://blog.csdn.net/weixin_44436078/article/details/121470318

版权

笔记专栏收录该内容

42 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在小程序中实现点击购物车图标跳转到购物车页面的功能。通过在商品操作栏的图标上绑定事件，并使用`wx.switchTab`方法，配合更新app.json的tabBar配置，确保页面路径正确，从而实现页面间的跳转。重点涉及小程序的前端交互和页面路由管理。

摘要由CSDN通过智能技术生成

需求：点击图一购物车按钮，跳转到购物车页面

1.按钮绑定事件

<van-goods-action-icon icon="cart-o" text="购物车" bind:click="goShoppingCart" />

2.事件（要用wx.switchTab）

// 进入购物车
    goShoppingCart () {
        wx.switchTab({
            url: `/pages/index/shoppingCart/index`
        })
    },

⚠️注意这个url路径要与app.json中的pagePath一样

3.在app.json中添加

"tabBar": {
        "list": [{
            "pagePath": "pages/index/home/index",
            "text": "首页"
        },{
            "pagePath": "pages/index/category/index",
            "text": "分类"
        },{
            "pagePath": "pages/index/shoppingCart/index",
            "text": "购物车"
        },{
            "pagePath": "pages/index/me/index",
            "text": "我的"
        }]
    },
"pages": [
        "pages/index/index",
        "pages/index/home/index",
        "pages/index/shoppingCart/index",
        "pages/index/category/index",
        "pages/index/me/index"
    ]

⚠️这个路径是从app.json开始数的相对路径，如图