dev_interactive

SPA页面交互

同一个html页面不同界面之间跳转有三种方法：

1.a标签跳转

利用a标签的href属性进行跳转：

 <a href="#page1" data-reverse='true' data-transition='pop'></a>

• href 必填项，值为要跳转类名um-page页面的id，此值必须在id前加上 #；
• data-reverse 选填项，页面动画是否反向，true为反向，false为正常，默认为false;
• data-transition 选填项，设置页面的动画类型，默认为'um'。 框架设置的SPA页面交互动画有8中类型：um,f7,pop,stretch,drop,slideup,fade,scale_down_up.

示例代码：

<div class="um-page" id="page1">
    <div class="um-header" >
        <a href="#page1" data-reverse='false' data-transition='fade'>跳转到page2页面</a>
        <h3>page1</h3>
    </div>
    <div class="um-content">

    </div>
</div>
<div class="um-page" id="page2">
    <div class="um-header" >
        <a href="#" class="um-back">返回</a>
        <h3>page2</h3>
    </div>
    <div class="um-conten
    </div>
</div>

注意：每个包含um-page类的div标签为一个显示界面，每个界面必须有对应的id值；

2.UM.page方法跳转

UM.page对象提供了两个页面跳转的方法changePage()和back();

UM.page.changePage(option)

option

{
    target: "#page1",
    isReverse: 0,
    transition: "um"
}

• target 必填项，值为要跳转类名um-page页面的id，此值必须在id前加上 #；
• isReverse 选填项，页面动画是否反向，1为反向，0为正常，默认为0;
• transition 选填项，设置页面的动画类型，包含8种动画类型，默认为'um'。

在js代码中调用该方法可以实现在任意界面之间的跳转。

UM.page.back();

该方法不需要传递参数，默认跳转回上一个界面。

3.类名跳转

<a href="#" class="um-back">返回</a>

给a标签加上um-back的class类名，点击该标签返回上一个界面。

测试demo的github地址