【微信小程序实现页面跳转】

最新推荐文章于 2025-02-23 21:29:36 发布

m0_46658024

最新推荐文章于 2025-02-23 21:29:36 发布

阅读量227

点赞数

文章标签： javascript 微信小程序

本文链接：https://blog.youkuaiyun.com/m0_46658024/article/details/129099043

版权

文章介绍了如何在微信小程序中实现跳转到tabBar页面和非tabBar页面，以及如何进行回退操作。使用wx.switchTab进行tabBar页面跳转，wx.navigateTo用于非tabBar页面跳转，wx.navigateBack则用于页面回退。示例代码包括声明式和编程式的跳转及回退方法。

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

1、跳转到tabBar页面以及回退(回退没有实现)

<!-- 声明式跳转 wxml-->
<navigator url="/pages/message/message" open-type="switchTab">消息</navigator>
<!-- 必须要加switchTab -->


<!-- 编程式跳转页面 wxml-->
<button bindtap="goMess">消息</button>

//js
  goMess(){
   wx.switchTab({
     url: '/pages/message/message',
   })
  },

2、跳转到非tabBar页面以及回退

<!-- 声明式跳转 wxml -->
<navigator url="/pages/info/info" >info页面</navigator>
<!-- open-type的值默认是navigate -->


<!-- 编程式跳转 wxml -->
<button bindtap="goinfo">info页面</button>

//js
 goinfo(){
    wx.navigateTo({
      url: '/pages/info/info',
    })
  },


<!-- 后退导航 wxml-->
<!-- navigator -->
<navigator open-type = "navigateBack" delta="1">1返回</navigator>

<!-- 编程式后退导航 wxml-->
<button bindtap="back">2返回</button>
//js
  back(){
    wx.navigateBack()
  },