navigator 导航控制

v0.6.1+

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

API

push(options, callback)

把一个weex页面URL压入导航堆栈中,可指定在页面跳转时是否需要动画,以及操作完成后需要执行的回调函数

参数

  • options {Object}:选项参数
    • url {stirng}:要压入的 Weex 页面的 URL
    • animated {string}"true" 示意为页面压入时需要动画效果,"false" 则不需要,默认值为 "true"
  • callback {Function}:执行完该操作后的回调函数

pop(options, callback)

把一个 Weex 页面 URL 弹出导航堆栈中,可指定在页面弹出时是否需要动画,以及操作完成后需要执行的回调函数。

参数

  • options {object}:选项参数对象
    • animated {string}"true" 示意为弹出页面时需要动画效果,"false" 则不需要,默认值为 "true"
  • callback {function}:执行完该操作后的回调函数

注意事项:animated 二级参数目前仅支持字符串的 "true""false",传入布尔值类型会导致程序崩溃,未来版本会修复这个问题

Example

  1. <template>
  2. <divclass="wrapper">
  3. <textclass="button" @click="jump">Jump</text>
  4. </div>
  5. </template>
  6. <script>
  7. var navigator = weex.requireModule('navigator')
  8. var modal = weex.requireModule('modal')
  9. exportdefault{
  10. methods:{
  11. jump (event){
  12. console.log('will jump')
  13. navigator.push({
  14. url:'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js',
  15. animated:"true"
  16. }, event =>{
  17. modal.toast({ message:'callback: '+ event })
  18. })
  19. }
  20. }
  21. };
  22. </script>
  23. <stylescoped>
  24. .wrapper {
  25. flex-direction: column;
  26. justify-content: center;
  27. }
  28. .button {
  29. font-size:60px;
  30. width:450px;
  31. text-align: center;
  32. margin-top:30px;
  33. margin-left:150px;
  34. padding-top:20px;
  35. padding-bottom:20px;
  36. border-width:2px;
  37. border-style: solid;
  38. color:#666666;
  39. border-color:#DDDDDD;
  40. background-color:#F5F5F5
  41. }
  42. </style>

try it