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');}
        });
  • 相关阅读:
    Java入门
    Java入门
    字符串常用方法(转载--https://www.cnblogs.com/ABook/p/5527341.html)
    SSM-8FastDfs搭建
    SSM7-nginx的反向代理和负载均衡
    SSM-6nginx Linux下的安装
    SSM-5zookeeper在LINUX上自启
    SSM4-Linux上jdk、tomcat、zookeeper------tar zxvf的安装
    SSM3-SVN的安装和搭建环境
    SSM2-搭建maven常见的错误以及解决方法
  • 原文地址:https://www.cnblogs.com/dajianshi/p/4372265.html
Copyright © 2011-2022 走看看