navigator 导航控制
v0.6.1+
众所周知,在浏览器里,我们可以通过前进或者回退按钮来切换页面,iOS/Android 的 navigator 模块就是用来实现类似的效果的。除了前进、回退功能,该模块还允许我们指定在切换页面的时候是否应用动画效果。
API
push(options, callback)
把一个weex页面URL压入导航堆栈中,可指定在页面跳转时是否需要动画,以及操作完成后需要执行的回调函数
参数
options {Object}:选项参数url {stirng}:要压入的 Weex 页面的 URLanimated {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
