使用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');}
});

解决AF3 诡异的页面显示问题的更多相关文章

  1. Loadrunner解决启动浏览器后页面显示空白

    Loadrunner解决启动浏览器后页面显示空白 2018年5月20日,今天照常打开Loadrunner准备学习,在录制的时候却出现了一个问题,浏览器可以启动,但是程序页面缺是加载不出来,主要症状体现 ...

  2. 如何在CSS中解决长英文单词的页面显示问题?CSS3

    简言 在页面排版中,经常遇到长英文单词溢出段落容器的情况,如何解决该问题?现编制如下对比演示程序: 演示程序 42du.cn-在线演示程序 部分html代码 <div class="b ...

  3. 解决nginx+php二级页面显示空白的问题

    迁移官网商城的发现主页的二级界面显示空白页,此https商城网站 后修改nginx配置,显示正常 添加 location ~ [^/]\.php(/|$) { #fastcgi_pass remote ...

  4. ctrl+shift+del 清理火狐缓存,解决页面显示错乱问题

    ctrl+shift+del 清理火狐缓存,解决页面显示错乱问题

  5. 如何解决JSP页面显示乱码问题

    一.JSP页面显示乱码 下面的显示JSP页面(display.jsp)就出现乱码: <html> <head> <title>JSP的中文处理</title& ...

  6. 关于PHP页面显示乱码问题的解决

    关于PHP页面显示乱码问题的解决 网页乱码一直是网络编程高手都头痛的问题,我是一个PHP Web编程的初学者,学习当中也遇到了这个问题,查找了相关的资源,总结如下: 一般的中文编码:gb2312,gb ...

  7. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  8. 解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 ...

  9. long型长整数字在前端页面显示异常及其解决方法

    文章目录 1.引子 2.解决问题 (1)初试EL表达式取long型数值 (2)再探EL表达式取字符串格式long型数值 (3)最后一试---给EL表达式加引号 3.总结 1.引子 在做项目中,发现了一 ...

随机推荐

  1. C# winform打包(带数据库安装)<转>

    使用VS自带的打包工具,制作winform安装项目 开发环境:VS2008 Access 操作系统:Windows XP 开发语言:C# 项目名称:**管理系统 步骤: 1.打开开发环境VS2010, ...

  2. JAVA-JSP内置对象之response对象实现页面跳转

    相关资料:<21天学通Java Web开发> response对象 实现页面跳转1.可以通过response对象的sendRedirect()方法设置页面重定向,从而实现页面跳转.2.这种 ...

  3. 2. 知识图谱-命名实体识别(NER)详解

    1. 通俗易懂解释知识图谱(Knowledge Graph) 2. 知识图谱-命名实体识别(NER)详解 3. 哈工大LTP解析 1. 前言 在解了知识图谱的全貌之后,我们现在慢慢的开始深入的学习知识 ...

  4. 【linux】提醒"libc.so.6: version `GLIBC_2.14' not found"系统的glibc版本太低

    原文链接:http://www.myexception.cn/linux-unix/1622052.html [linux]提示"libc.so.6: version `GLIBC_2.14 ...

  5. 【卡西欧Fx-5800p系列教程】Pol()和Rec()正反算妙用

    一.背景概述 我要单独把这两个公式列出来写篇文章, 我觉得搞测量的如果能熟练运用 Pol()和Rec()这两个公式,那么他是会用卡西欧计算器的里程碑事件,也就是说,你开始入门了. 为什么呢?他虽然是内 ...

  6. Dell 服务器阵列扩容【经验分享(转)】

    看到论坛有朋友发帖询问Dell服务器的扩容,索性整理下之前做的文档,发出来和大家做个分享. 做之前给大家提醒2个注意点:①请做好数据备份,相同于HP.IBM,该扩容过程是不可逆的.②本扩容方法支持同级 ...

  7. Domain应用之 根据某个Many2one的对象的 X2many对象 过滤

    如果两者都是many2one类型的对象,过滤非常简单,在xml中添加domain过滤即可,比如 国家.省市之间的联动关系. 如果想要根据某个对象的X2many类型的字段进行过滤该如何去做呢? 答案是利 ...

  8. systemd&systemctl

    systemd is a system and service manager for Linux operating systems. When run as first process on bo ...

  9. im ui框架调研,对比

    1, https://github.com/jpush/aurora-imui 极光的 支持 Android/iOS/RN 提供了消息列表.输入视图 功能不多, 2,https://github.co ...

  10. pom.xml设置maven的编码方式

    <build> <defaultGoal>compile</defaultGoal> <plugins> <plugin> <grou ...