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

try it