微信小程序页面导航-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序页面导航。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.声明式导航

1.1声明式跳转Tab页面

1.1.1配置的Tab页面

微信小程序页面导航,微信小程序,微信小程序,小程序

1.1.2页面跳转书写

<navigator url="/pages/home/home" open-type="switchTab">跳转首页</navigator>

1.2.3页面展示

微信小程序页面导航,微信小程序,微信小程序,小程序

1.2声明式跳转到非Tab页面

1.2.1页面跳转代码

<navigator url="/pages/info/info" open-type="navigate">跳转非tab页面</navigator>

其实默认跳转的就是非Tab页面，可以简写成一下

<navigator url="/pages/info/info">跳转非tab页面</navigator>

1.2.2图片展示

微信小程序页面导航,微信小程序,微信小程序,小程序

1.3声明式导航传参

<navigator url="/pages/info/info?name=forever&age=18">跳转非tab页面</navigator>

注意：跳转tab页面不能传参,但是非Tab页面可以传递参数,微信开发左下角！

微信小程序页面导航,微信小程序,微信小程序,小程序

或者在跳转后的页面

微信小程序页面导航,微信小程序,微信小程序,小程序

1.4后退导航

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

说明：delta代码后退的层数，默认为1。如果指定几层，直接输入数字即可！

2.编程式导航

2.1编程式跳转Tab页面

2.1.1wxml

<view bindtap="change1">编程式导航1跳转Tab页面</view>

2.1.2js文件

  change1(){
wx.switchTab({
//路径
  url: '/pages/home/home',  
 //成功的回调函数
  success:(res)=>{   
console.log(res);
  },
   //失败的回调函数
  fail:(error)=>{      
    console.log(error);
  }
})
  },

2.2编程式跳转到非Tabe页面

2.2.1wxml文件

<view bindtap="change2">编程式导航1跳转非Tab页面</view>

2.2.2js文件

  change2(){
    wx.navigateTo({
      url: '/pages/info/info',
      success:(res)=>{
        console.log(res);
      },
      fail:(error)=>{
        console.log(error);
      }
    })
  },

2.3编程式传参

2.3.1js文件

  change2(){
    wx.navigateTo({
      url: '/pages/info/info?name=forever&age=18',
      success:(res)=>{
        console.log(res);
      },
      fail:(error)=>{
        console.log(error);
      }
    })
  },

注意：还是不能将参数传递到Tab页面。

微信小程序页面导航,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-525446.html

2.4后退导航

2.4.1wxml文件

<button bindtap="change1">编程式返回上一级</button>

2.4.2js文件

  change1(){
    wx.navigateBack({
      delta:2
    })
  },

3.部分源码展示

3.1wxml文件

<!--pages/message/message.wxml-->
<!-- 声明式导航 -->
<!-- 跳转tab页面 -->
<navigator url="/pages/home/home" open-type="switchTab">跳转tab页面</navigator>
<!-- 跳转非tab页面 -->
<!-- navigate默认可以不用写 -->
<navigator url="/pages/info/info?name=forever&age=18">跳转非tab页面</navigator>
<!-- delta默认值为1 -->

<!-- 编程式导航 -->
<view bindtap="change1">编程式导航1跳转Tab页面</view>
<view bindtap="change2">编程式导航2跳转非Tab页面</view>

3.2js文件

  change1(){
wx.switchTab({
  url: '/pages/home/home?name=forever&age=18',
  success:(res)=>{
console.log(res);
  },
  fail:(error)=>{
    console.log(error);
  }
})
  },
  change2(){
    wx.navigateTo({
      url: '/pages/info/info?name=forever&age=18',
      success:(res)=>{
        console.log(res);
      },
      fail:(error)=>{
        console.log(error);
      }
    })
  },

到了这里，关于微信小程序页面导航的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！