navigator
导航控制v0.6.1+
众所周知,在浏览器里,我们可以通过前进或者回退按钮来切换页面,iOS/Android 的 navigator
模块就是用来实现类似的效果的。除了前进、回退功能,该模块还允许我们指定在切换页面的时候是否应用动画效果。
<template> <div class="div"> <text class="text" onclick="onItemClick">click me! {{message}}</text> </div> </template> <script> var navigator = require('@weex-module/navigator') var nextUrl = 'http://dotwe.org/raw/dist/6cd1703a45d7b2752cf05303069ce881.js' module.exports ={ data:{ message:'' }, methods:{ onItemClick:function(e){ var params = {'url':nextUrl,'animated':'true'} navigator.push(params, function(e) { console.log('i am the callback.') }); } } } </script> <style> .div { flex-direction: row; justify-content: space-between; align-items: center; width: 750; height: 90; padding-left:30; padding-right:30; border-bottom-width: 1; border-style: solid; border-color: #dddddd; } .text{ width: 750; height: 90; } </style>
push(options, callback)
把一个weex页面URL压入导航堆栈中,可指定在页面跳转时是否需要动画,以及操作完成后需要执行的回调函数
options {Object}
:选项参数url {stirng}
:要压入的 Weex 页面的 URLanimated {string}
:"true"
示意为页面压入时需要动画效果,"false"
则不需要,默认值为 "true"
callback {Function}
:执行完该操作后的回调函数var navigator = require('@weex-module/navigator') var params = { url: 'navigator-demo.js', animated: 'true' } navigator.push(params, function () { // callback })
pop(options, callback)
把一个 Weex 页面 URL 弹出导航堆栈中,可指定在页面弹出时是否需要动画,以及操作完成后需要执行的回调函数。
options {object}
:选项参数对象animated {string}
:"true"
示意为弹出页面时需要动画效果,"false"
则不需要,默认值为 "true"
callback {function}
:执行完该操作后的回调函数var navigator = require('@weex-module/navigator') var params = { animated: 'true' } navigator.pop(params, function () { // callback })
注意事项:animated
二级参数目前仅支持字符串的 "true"
和 "false"
,传入布尔值类型会导致程序崩溃,未来版本会修复这个问题