zoukankan      html  css  js  c++  java
  • 解决AF3 诡异的页面显示问题

      使用AF3开发应用,发现有一个bug,在同一个view下面的不同页面切换后,这时候切换到别的view中的页面,然后再切换到上一个view下的页面,此时只要目标不是刚才前一个view中的最后显示页面就会出问题,因为此时只显示最后的页面!

    调试后发现是由于最后的活动页面的active类没有被移除,我希望找到合适的事件来自己执行这个任务。因此跟踪了view和panel的事件。下面是我记录的AF3下 panel组件的切换过程触发的事件记录。

    //### 过程1:viewHome.pageHome --> viewLogin.page_login
    ******************   page_login panelbeforeload
    ******************   viewLogin panelbeforeload
    ******************   page_login panelbeforeunload
    ******************   viewLogin panelbeforeunload
    ******************   viewHome panelunload
    ******************   viewLogin panelload
    ******************   page_login panelload
    ******************   viewLogin panelload
    
    //### 过程2(:back):viewLogin.page_login --> viewHome.pageHome
    ******************   pageHome panelbeforeload
    ******************   viewHome panelbeforeload
    ******************   pageHome panelbeforeunload
    ******************   viewHome panelbeforeunload
    ******************   viewHome panelload
    ******************   viewLogin panelunload
    
    //### 过程3:viewHome.pageHome --> viewLogin.page_login
    ******************   page_login panelbeforeload
    ******************   viewLogin panelbeforeload
    ******************   page_login panelbeforeunload
    ******************   viewLogin panelbeforeunload
    ******************   viewHome panelunload
    ******************   viewLogin panelload
    ******************   page_login panelload
    ******************   viewLogin panelload
    
    //### 过程4:viewLogin.page_login --> viewLogin.page_register
    ******************   page_register panelbeforeload
    ******************   viewLogin panelbeforeload
    ******************   page_login panelbeforeunload
    ******************   viewLogin panelbeforeunload
    ******************   page_login panelunload
    ******************   viewLogin panelunload
    ******************   page_register panelload
    ******************   viewLogin panelload
    
    //### 过程5:viewLogin.page_register --> viewLogin.page_login
    ******************   page_login panelbeforeload
    ******************   viewLogin panelbeforeload
    ******************   page_register panelbeforeunload
    ******************   viewLogin panelbeforeunload
    ******************   page_register panelunload
    ******************   viewLogin panelunload
    ******************   page_login panelload
    ******************   viewLogin panelload


    发现如下问题:

    1,不同view下panel切换:

      transition不带:back的时候,原panel和view有unload事件;

      如果带有:back,则原panel没有unload事件,原view有unload事件

    2,同一view下panel切换:

      transition不带:back的时候,原panel有unload事件,view竟然也有unload事件!!;

      如果带有:back,则原panel没有unload事件,view有unload事件!!

    想起应该是冒泡事件捣乱,遂在panel的事件中停止冒泡,再次重复上面过程:

    //### 过程1:viewHome.pageHome --> viewLogin.page_login
    ******************   page_login panelbeforeload
    ******************   page_login panelbeforeunload
    ******************   viewHome panelunload
    ******************   viewLogin panelload
    ******************   page_login panelload
    
    //### 过程2(:back):viewLogin.page_login --> viewHome.pageHome
    ******************   pageHome panelbeforeload
    ******************   pageHome panelbeforeunload
    ******************   viewLogin panelunload
    ******************   viewHome panelload
    ******************   pageHome panelload
    
    //### 过程3:viewHome.pageHome --> viewLogin.page_login
    ******************   page_login panelbeforeload
    ******************   page_login panelbeforeunload
    ******************   viewHome panelunload
    ******************   viewLogin panelload
    ******************   page_login panelload
    
    //### 过程4:viewLogin.page_login --> viewLogin.page_register
    ******************   page_register panelbeforeload
    ******************   page_login panelbeforeunload
    ******************   page_login panelunload
    ******************   page_register panelload
    
    //### 过程5:viewLogin.page_register --> viewLogin.page_login
    ******************   page_login panelbeforeload
    ******************   page_register panelbeforeunload
    ******************   page_login panelload
    ******************   page_register panelunload

    这下子逻辑清晰了:

    一、不同view之间的页面切换:

    原view有unload事件,新view有load事件;新panel有beforeload、beforeunload,load事件。

    二、同一个view之中的页面切换:

    原panel有beforeunload、unload事件,新panel有beforeload、load事件;view没有事件!

    $('.view,.panel').on('panelbeforeload panelbeforeunload panelload panelunload',function(E){
            var el=$(this);
            if(el.hasClass('panel')){E.preventDefault();E.stopPropagation();}
            if(el.hasClass('panel') && E.type=='panelunload'){el.removeClass('active');}
            if(el.hasClass('view') && E.type=='panelunload'){el.find('.panel').removeClass('active');}
        });
  • 相关阅读:
    wampserver服务器离线,无法访问此网站 找不到 项目 的服务器 DNS 地址。
    node.js(一)介绍与安装
    js全局函數
    类和对象的定义
    iframe框架学习
    while和do-while的区别
    html5视频音频
    列表
    html表格的学习
    云课堂数组1
  • 原文地址:https://www.cnblogs.com/dajianshi/p/4372265.html
Copyright © 2011-2022 走看看