navigator

众所周知,在浏览器里,我们可以通过前进或者回退按钮来切换页面,iOS/Android 的navigator模块就是用来实现类似的效果的。除了前进、回退功能,该模块还允许我们指定在切换页面的时候是否应用动画效果。

API

导航跳转

  1. 注意:使用pushpushParampushFull打开的页面只能用back,backFull返回,使用present打开的页面,只能用dismiss关闭
  2. push打头的方法和present方法打头的方法区别是动画效果不一样,push是由右往左打开一个页面,present是由下往上打开
  3. /**
  4. @param url 相对地址(支持root:写法)
  5. */
  6. push(url)
  7. /**
  8. @param url 相对地址(支持root:写法)
  9. @param param 参数
  10. */
  11. pushParam(url,param )
  12. /**
  13. @param parameters (url:'地址',param:'参数',animate:'是否使用动画',isPortrait:'是否是竖屏')
  14. @param callback 页面返回时的回调
  15. */
  16. pushFull(parameters,callback)
  17. /**
  18. 关闭当前页面,返回上一个页面,
  19. */
  20. back()
  21. /**
  22. 关闭当前页面,返回上一个页面,同时带上参数
  23. @param param 带给上一个页面的参数
  24. @param animate 是否使用动画,(android无效)
  25. */
  26. backFull(param,animate)
  27. /**
  28. 打开一个页面,动画是从下往上弹出来
  29. */
  30. present(url)
  31. /**
  32. 打开一个页面,动画是从下往上弹出来
  33. @param parameters (url:'地址',param:'参数',animate:'是否使用动画',isPortrait:'是否是竖屏')
  34. @param callback 页面返回时的回调
  35. */
  36. presentFull(parameters,callback)
  37. /**
  38. 关闭,present开头方法打开的页面
  39. */
  40. dismiss()
  41. /**
  42. 关闭,present开头方法打开的页面,同时带上参数
  43. @param param 带给上一个页面的参数
  44. @param animate 是否使用动画,(android无效)
  45. */
  46. dismissFull(param,animate)
  47. /**
  48. * 开启手势返回(仅对ios有效)
  49. **/
  50. enableBackGesture()

获取参数

  1. 注意:此方法只有写在onPageInit里面才能有效获取
  2. /**
  3. 获取上一个页面传递来的参数,
  4. */
  5. param()

定页返回

  1. 如果你打开的了多个页面,现在希望越过中间的页面,返回第一个或其它页面,这里的方法将帮你做到
  2. /**
  3. 返回指定id的页面,id由setPageId方法设定
  4. */
  5. backTo(id)
  6. /**
  7. 设置当前页的id
  8. */
  9. setPageId(id)
  10. /**
  11. 将此页面及这个页面之后打开的页面纳入一个堆栈,
  12. */
  13. setRoot(id)
  14. 现在来说一下怎么达到效果,假设有A->B->C三个页面,现在希望从C直接回到A
  15. 1.AonPageInit中调用setRoot('A'),setPageId('A')
  16. 2.CbackTo('A')

Demo

  1. /**推入式跳转
  2. push()
  3. {
  4. var nav = weex.requireModule('navigator') ;
  5. //相对路径写法,也可以root:绝对路径
  6. nav.push('page1.js')
  7. }
  8. /**带参数推入式跳转
  9. pushWidthParam()
  10. {
  11. var self=this;
  12. var nav = weex.requireModule('navigator') ;
  13. var param={};
  14. param.a='value1'
  15. nav.pushParam('page1.js',param);
  16. //或者
  17. nav.pushFull({
  18. url: 'navlanscape.js',
  19. param: {a: '这是传过来的值'},
  20. animate:true,
  21. isPortrait:false
  22. }, (e) => {
  23. if (e != undefined)
  24. self.callbackdata = e.ok;
  25. })
  26. }
  27. /**弹出式跳转
  28. present(){
  29. var self=this;
  30. var nav = weex.requireModule('navigator') ;
  31. nav.present('page1.js')
  32. //或者
  33. nav.presentFull({
  34. url: 'navlanscape.js',
  35. param: {a: '这是传过来的值'},
  36. animate:true,
  37. isPortrait:false
  38. }, (e) => {
  39. if (e != undefined)
  40. self.callbackdata = e.ok;
  41. })
  42. },
  43. /**获取参数
  44. created:function(){
  45. var self=this;
  46. var globalEvent = weex.requireModule('globalEvent') ;
  47. globalEvent.addEventListener("onPageInit", function (e) {
  48. var navigator = weex.requireModule('navigator') ;
  49. var param=navigator.param();
  50. });
  51. }