进行跳转,只要在url中添加跳转页面的路径即可。代码 ........//跳转涵盖内部所有代码形成的页面
当前位置:   article > 正文

微信小程序总结跳转的几种方式_微信小程序跳转页面代码

微信小程序跳转页面代码

微信小程序跳转方式

原本的博客写的有很大的问题,经指正做出了修改,学知识有点不求甚解了,要反思~要反思~~

1.navigator 跳转

最常见的跳转方法就是运用标签<navigator url="../../.."></navigator>进行跳转,只要在url中添加跳转页面的路径即可,点击时有背景,具体参数如下:
在这里插入图片描述

代码
<navigator url="../skill/skill">
    ........//跳转涵盖内部所有代码形成的页面
</navigator>
  • 1
  • 2
  • 3

2.运用 监听bindtap事件实现页面的跳转

(1).wx.navigatorTo

给页面布局添加监听bindtap事件,通过wx.navigatorTo来实现跳转,该方法保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。具体参数如下:
在这里插入图片描述

代码
//wxml
 <view  bindtap='home'>
 </view>
  • 1
  • 2
  • 3
//js
home: function (e) {
     wx.navigateTo({
       url: '../../..'        //跳转链接
     })
   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
(2).wx.redirectTo

给页面布局添加监听bindtap事件,通过wx.redirectTo实现跳转,该方式关闭当前页面,跳转到应用内某个页面具体参数与(1)相同:

代码:
//wxml
 <view  bindtap='home'>
 </view>
  • 1
  • 2
  • 3
//js
home: function (e) {
     wx.redirectTo({
       url: '../../..'        //跳转链接
     })
   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
(3)wx.reLaunch

给页面布局添加监听bindtap事件,通过wx.reLaunch实现跳转,该方式关闭所有页面,跳转到应用内某个页面, 具体参数与(1)相同:

代码:
//wxml
 <view  bindtap='home'>
 </view>
  • 1
  • 2
  • 3
//js
home: function (e) {
    wx.reLaunch({
       url: '../../..'        //跳转链接
     })
   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
(3)wx.switchTab

同样是给页面布局添加监听bindtap事件,通过wx.switchTab来实现跳转,重点 wx.switchTab只能跳转到tabBar配置页面,具体参数与(1)相同

代码
home: function (e) {
      wx.switchTab({
        url: '../../..'
      })
    }
  • 1
  • 2
  • 3
  • 4
  • 5
(4)wx.navigateBack

wx.navigateBack是关闭当前页面,返回上一级。delta决定了返回页数,当前页数小于delta,则返回首页。

代码
home: function (e) {
wx.navigateBack({
  delta: 2    //返回页数
})
}
  • 1
  • 2
  • 3
  • 4
  • 5
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/131676
推荐阅读
相关标签