0
点赞
收藏
分享

微信扫一扫

微信小程序-页面导航

ZSACH 2022-01-25 阅读 74

1.什么是页面导航

页面导航是指页面之间的相互跳转。

  ①<a>链接

  ②location.href

小程序实现页面导航的两种方式

  ① 声明式导航

    ·在页面上声明一个<navigator>导航组件

    ·通过点击<navigator>组件实现页面跳转

在使<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

·url表示要跳转的 页面的地址,必须以/开头

·open-type 表示 跳转的方式,必须为 switchTab

< navigator   url =" /pages/message/message open-type =" switchTab "></ navigator >

2.导航到非tabBar页面

非tabBar页面指的是没有被配置为tabBar的页面,写法

< navigator   url =" /pages/info/info open-type =" navigate "> 导航到info </ navigator >

3.后退导航

如果后退到上一页面或多级页面,则需要指定open-type属性 和 delta属性,其中:

·open-type 的值必须是navigateBack,表示要进行后退导航

·delta 的值必须是 数字,表示要后退的层级

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

   ② 编程式导航

    ·调用小程序的导航API,实现页面的跳转

调用wx.switchTab(Object object)方法,可以跳转到 tabBar页面。其中Object 参数对象的属性列表如下:

< button   bindtap =" gotomessage "> 跳转到tabBar页面 </ button

     gotomessage (){                                                                     

         wx . switchTab ( {                                                                   

          url :   ' /pages/message/message ',                                      

         } )                                                                                        

     }                                                                                             

属性

类型

是否必选

说明

url

string

需要跳转的tabBar页面路径,路径后不能代参数

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功,失败都会执行)

调用wx.navigateTo(Object object)方法,可以跳转到 非tabBar的页面。其中Object 参数对象的属性列表如下:

< button  bindtap =" gotoinfo "> 跳转到非tabBar页面 </ button >

绑定的js:                                                                              

  gotoinfo(){                                                                           

        wx.navigateTo({                                                            

          url: '/pages/info/info',                                                  

        })                                                                                  

  }                                                                                         

属性

类型

是否必选

说明

url

string

需要跳转的非tabBar页面路径,路径后不能代参数

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功,失败都会执行)

后退导航

调用wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。其中Object 参数对象可选的属性列表如下:

< button   bindtap =" gotoBack "> 后退 </ button >

绑定的js:                                                       

gotoBack (){                                                   

         wx . navigateBack ( {                                

          delta :   1                                               

         } )                                                          

     }                                                               

属性

类型

默认值

是否必选

说明

delta

number

1

返回页面数,如果delta大于现有页数,则返回到首页

success

function

 接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功,失败都会执行)

声明式导航传参:

< navigator   url =" /pages/info/info?name=ww&age=18 "> 跳到info页面 </ navigator >

编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时,也可以携带参数,代码示例如下:

< button   bindtap =" gotoinfo2 "> 跳到info页面 </ button >

绑定的js:                                                                    

gotoinfo2 (){                                                               

         wx . navigateTo ( {                                                 

          url :   ' /pages/info/info?name=lilei&gender=male ',

         } )                                                                         

     }                                                                              

获得参数:

在跳转到的页面的onLoad中接收导航参数:

在 .js 页面 初始化一个 query对象

data: {

        query:{}

    }

  onLoad: function (options) {

       console.log(options);

    query:options

    }

举报

相关推荐

0 条评论