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     
}

技术
今日推荐
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信