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');}
        });
  • 相关阅读:
    mongodb将mysql数据导入
    mongodb增删改查操作
    mongdb安装
    Python获取两个文件的交集、并集、差集
    java回调函数详解
    java线程锁之synchronized
    mysql知识点汇集
    Springboot2.0实现URL拦截
    idea将springboot打包成jar或者war
    leetcode1128
  • 原文地址:https://www.cnblogs.com/dajianshi/p/4372265.html
Copyright © 2011-2022 走看看