页面转场

  • 为了避免在移动端,页面之间跳转在下一个页面还没有渲染出内容时,出现白屏的情况
  • 自定义跳转的动画切换,目前只提供从左向右和从右向左的动画,android是盖了一个进度圈
  • 当开始页面转场时,一个历史记录堆栈会被创建,并开始向这个堆栈存取删堆栈等操作
  • 该转场机制包含页面前进回退等一套,页面业务逻辑的堆栈,处理了模块与模块之间跳转页面历史记录堆栈混乱
  • 页面之间传参和取参

方法

back

back
(
  • [backIndex]
  • [queryParams]
)

返回上一页或返回上N页
当返回上一页时,组件会进行堆栈的删除,回退几个页面就删除几个堆栈
特别说明一下,开发在next几个页面,回退时就最多回退next的几个,不然,组件如果判断出超出了堆栈,则默认回退到前一个页面,如果堆栈中都没有了,则会关闭当前的webview

参数:

名称类型标识描述
[backIndex] Number 可选

需要回退的页面数,默认不传,是回退上一页(注:请传正数)

[queryParams] String/Object 可选

回退页面时传递的参数,接受字符串和Object

  • String:如果是字符串,则等于queryParams即传给前面页面的search,如:"?backData=haha",该字符串会被拼接上回退的url地址上
  • Object:{ queryParams:"?backData=haha" data:{name:"haha"}//存入缓存的数据 }

示例:

<script>
    cmp.href.back(5,{
        queryParams:"?backData=haha",
        data:{name:"haha"}
    });
</script>

closePage

closePage ()

关闭页面,并清空历史记录堆栈
当调用此方法时,页面会被关闭,历史记录被清空,常常用于开发者认为再回退就应该关闭页面的情况
如果是cmp壳端,效果是关闭当前webview;微信端是退出微协同

示例:

<script>
    cmp.href.closePage();
</script>

getBackParam

getBackParam
(
  • [paramKey]
)
String/Object

获取back回退传递参数
页面back到指定页面时,在该页面获取到跳转前传递的参数

参数:

名称类型标识描述
[paramKey] String 可选

获取传递参数指定的key的值,默认:不传值,将存入的数据全部返回

返回值:

[String/Object]

返回传递数据,或传递数据的指定的key值

示例:

<script>
    cmp.href.getBackParam();
</script>

getParam

getParam
(
  • [paramKey]
)
String/Object

获取跳转传递参数
页面next或go到指定页面时,在该页面获取到跳转前传递的参数

参数:

名称类型标识描述
[paramKey] String 可选

获取传递参数指定的key的值,默认:不传值,将存入的数据全部返回

返回值:

[String/Object]

返回传递数据,或传递数据的指定的key值

示例:

<script>
    cmp.href.getParam();
</script>

go

go
(
  • url
  • [params]
  • [options]
)

跳转到指定页面
当调用此方式进行跳转,页面和参数不会进入历史记录的堆栈中

参数:

名称类型标识描述
url String 必选

需要跳转的页面

[params] String/Object 可选

传递到下一个页面的参数

[options] String/Object 可选

跳转到下一页的动画效果,

  • String:"left":从右向左(默认);"right":从左到右
  • Object:{ animated:true//是否开启动画(默认true), direction:"left"/"right" //动画方向 }

示例:

<script>
    cmp.href.go("http://seeyon/m3/app/xxx.html",{data:"haha"},"left");
</script>

next

next
(
  • url
  • [params]
  • [options]
)

跳转到下一页
当跳转时,当前页面的url会进入历史记录堆栈中,如果是传有参数,该参数和当前url一起被记录进历史记录中

参数:

名称类型标识描述
url String 必选

需要跳转的页面,如果需要打开新的webview需要重写cmp.href.openWebViewCatch()---返回值为1即开新的webview

[params] String/Object 可选

传递到下一个页面的参数

[options] String/Object 可选

跳转到下一页的动画效果,和可能是打开多webview后需要缓存的回调函数,

  • String:"left":从右向左(默认);"right":从左到右
  • Object:{ animated:true//是否开启动画(默认true), direction:"left"/"right" //动画方向 }

示例:

<script>
    cmp.href.next("http://seeyon/m3/app/xxx.html",{data:"haha"},"left");
    或者
    打开webview时,
    cmp.href.openWebViewCatch = function(){return 1}//注:微协同不支持此API

    cmp.href.next("http://newWebview"{value:"value"},{animated:true,direction:true})
</script>

openWebViewCatch

openWebViewCatch () String/Object

提供给开发者重写的方法,用于兼容调用next时是页面跳转还是打开一个新的webview

返回值:

[String/Object]

返回传递数据,或传递数据的指定的key值

示例:

//注:微协同不支持此API
<script>
    cmp.href.openWebViewCatch = function(){
         return 1;//next时打开webview
         return 2://next时不进行动画
    };
</script>
Top