专注于
IT技术和业内交流

cordova+famous实战篇(5)——页面跳转(1)

看了上一篇文章,相信很多小伙伴都有疑问。比如什么是事件?有哪些事件?在famous中,事件又是怎么执行的?对于这些疑问,大家可以去参考Cordova+Famous入门之事件解析这篇文章,里面详细讲解了famous的事件机制。那famous里面到底定义了哪些事件呢?大家可以看看下面这张表:

    change                         : [Event, true],
    submit                         : [Event, true],

    // UI Events (http://www.w3.org/TR/uievents/)
    abort                          : [Event, false],
    beforeinput                    : [InputEvent, true],
    blur                           : [FocusEvent, false],
    click                          : [MouseEvent, true],
    compositionend                 : [CompositionEvent, true],
    compositionstart               : [CompositionEvent, true],
    compositionupdate              : [CompositionEvent, true],
    dblclick                       : [MouseEvent, true],
    focus                          : [FocusEvent, false],
    focusin                        : [FocusEvent, true],
    focusout                       : [FocusEvent, true],
    input                          : [InputEvent, true],
    keydown                        : [KeyboardEvent, true],
    keyup                          : [KeyboardEvent, true],
    load                           : [Event, false],
    mousedown                      : [MouseEvent, true],
    mouseenter                     : [MouseEvent, false],
    mouseleave                     : [MouseEvent, false],

    // bubbles, but will be triggered very frequently
    mousemove                      : [MouseEvent, false],

    mouseout                       : [MouseEvent, true],
    mouseover                      : [MouseEvent, true],
    mouseup                        : [MouseEvent, true],
    contextMenu                    : [MouseEvent, true],
    resize                         : [UIEvent, false],

    // might bubble
    scroll                         : [UIEvent, false],

    select                         : [Event, true],
    unload                         : [Event, false],
    wheel                          : [WheelEvent, true],

    // Touch Events Extension (http://www.w3.org/TR/touch-events-extensions/)
    touchcancel                    : [TouchEvent, true],
    touchend                       : [TouchEvent, true],
    touchmove                      : [TouchEvent, true],
    touchstart                     : [TouchEvent, true]

相信稍微有点JS基础的朋友,都能看懂每个事件的代表的意思。如果实在不知道,就自行问度娘啦,这里我就不再一一解释了。
好了,接下来我们进入今天的主题,关于famous的页面跳转问题。首先,我们来了解下页面跳转的基本原理:
cordova+famous
我们的目标是从A页面跳转到B页面,可以把黑线框看作是手机的屏幕。点击跳转之后,我们首先把B页面放在屏幕的外面,然后B页面向左滑动至完全覆盖A页面。
现在我们把之前写的登录页面(作为A页面)和个人中心页面(作为B页面)拿出来做例子,点击登录页面的‘登录’按钮之后,个人中心页面(B页面)覆盖登录页面(A页面)。下面我们来撸代码:

1.引入个人中心页面

var personalCenter = require('./personalCenter');

2.编写跳转事件

   //点击登录按钮
    if(e === 'click' && p.node.marked === 'submit'){

        var nextPage = this.getParent().addChild(new personalCenter()).setAlign(1,0);//加入个人中心页面,并且设置在屏幕外面。

        nextPage.el.addClass('trans');//给页面加入过渡效果

        setTimeout(function(){//延迟加载

            nextPage.setAlign(0,0);//个人中心页面覆盖登录页面

        }.bind(this),100);

    }

这里大家可能有两个疑问:1.famous里面没有动画效果吗,为什么要用添加class的方式加入动画?2.为什么要使用延迟加载?
对于第一个问题,famous中肯定是有动画的,而且可以做很多复杂的动画。例如:3D physics engine60fps animations。但是对于这里这些简单的动画,就大材小用啦,为了编写简单方便,就直接使用class属性了。
对于第二个问题,是因为在加入class的时候,页面还没有来得及绘制,导致来不及作出动画,B页面就把覆盖A页面了。

3.查看运行结果
cordova+famous实战篇
是不是很简单呢?接下来,大家就自己动手试一试吧!撸撸更健康~

未经允许,不得转载本站任何文章:代码山 » cordova+famous实战篇(5)——页面跳转(1)

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们