阿里云赞助

navigator

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

<template>
<div class="wrapper">
<text class="button" @click="jump">Jump</text>
</div>
</template>
<script>
var navigator = weex.requireModule('navigator')
var modal = weex.requireModule('modal')
export default {
methods: {
jump (event) {
console.log('will jump')
navigator.push({
url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js',
animated: "true"
}, event => {
modal.toast({ message: 'callback: ' + event })
})
}
}
};
</script>
<style scoped>
.wrapper {
flex-direction: column;
justify-content: center;
}
.button {
font-size: 60px;
width: 450px;
text-align: center;
margin-top: 30px;
margin-left: 150px;
padding-top: 20px;
padding-bottom: 20px;
border-width: 2px;
border-style: solid;
color: #666666;
border-color: #DDDDDD;
background-color: #F5F5F5
}
</style>

try it

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0