小程序：页面跳转

Posted 2020-12-11 世界之大

navigator组件主要是用于界面跳转的

<navigator url="路径"> 跳转页面 </navigator>

navigator中的open-type属性:

　　　　　　　　redirect:重定向（关闭当前页面，打开新的页面，不允许跳到tabbar页面，并且不能返回）

　　　　　　　　　 　switchTab:跳转到tabBar页面，并且关闭其他所有非tabBar页面（需要tabBar中义）

　　　　　　　　　　 reLaunch:关闭其他所有页面，只显示当前页面　　　

　　　　　　　　　　 navigateBack：返回一个层级（属性：delta=“2” 可以返回两个层级）　　　　　　　

页面跳转传递数据：

　　　<navigator>跳转页面时传递参数</navigator>

　　　　直接跟在navigator中的url属性值后面，如下所示

　　　   <navigator url="/pages/detail/detail?name=xxx&age=18&height=1.81">按钮</navigator>

　　　   当然了我们也可以传递js文件中定义好的  data里面的数据，如下所示

　　　  <navigator url="/pages/detail/detail?name={{name}}&age={{age}}&height={{height}}">按钮</navigator>

 页面接受数据：

　　接受数据就比较简单了：

　　　　　　在detail(‘被跳转页面’)的js文件中，有一个onLoad的生命周期函数，他有一个参数 options

　　　　　     　options中就可以获取到我们传递过来的参数

       那么，当该页面返回时，怎么回传一条数据？

　　　　　　  我们通过另一个函数：onUnload函数：当页面退出时触发该函数

　　　　　　　　首先，我们需要获取到首页的对象

　　　　　　　　const pages = getCurrentPages();

　　　　　　　　我们通过打印 pages 可以得到 一个数组，数组中有两个对象

　　　　　　　　第一个对象：是我们要前去页面的那个页面对象

　　　　　　　　第二个对象：是我们要离开页面的这个页面对象

　　　　　　　　const home = pages[0]          ||   const home = pages[pages.length - 2]

　　　　　　　　上面获取home页面对象的方法，推荐第二个写法

　　　　　　　　直接调用home的setData方法进行修改

　　　　　　　　home.setData({

                   　　    ‘home页面里的data‘：‘要改变的值‘

    　　　　　　　})