解决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');}
});
解决AF3 诡异的页面显示问题的更多相关文章
- Loadrunner解决启动浏览器后页面显示空白
Loadrunner解决启动浏览器后页面显示空白 2018年5月20日,今天照常打开Loadrunner准备学习,在录制的时候却出现了一个问题,浏览器可以启动,但是程序页面缺是加载不出来,主要症状体现 ...
- 如何在CSS中解决长英文单词的页面显示问题?CSS3
简言 在页面排版中,经常遇到长英文单词溢出段落容器的情况,如何解决该问题?现编制如下对比演示程序: 演示程序 42du.cn-在线演示程序 部分html代码 <div class="b ...
- 解决nginx+php二级页面显示空白的问题
迁移官网商城的发现主页的二级界面显示空白页,此https商城网站 后修改nginx配置,显示正常 添加 location ~ [^/]\.php(/|$) { #fastcgi_pass remote ...
- ctrl+shift+del 清理火狐缓存,解决页面显示错乱问题
ctrl+shift+del 清理火狐缓存,解决页面显示错乱问题
- 如何解决JSP页面显示乱码问题
一.JSP页面显示乱码 下面的显示JSP页面(display.jsp)就出现乱码: <html> <head> <title>JSP的中文处理</title& ...
- 关于PHP页面显示乱码问题的解决
关于PHP页面显示乱码问题的解决 网页乱码一直是网络编程高手都头痛的问题,我是一个PHP Web编程的初学者,学习当中也遇到了这个问题,查找了相关的资源,总结如下: 一般的中文编码:gb2312,gb ...
- 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!
在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...
- 解决Vue 使用vue-router切换页面时 页面显示没有在顶部的问题
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 ...
- long型长整数字在前端页面显示异常及其解决方法
文章目录 1.引子 2.解决问题 (1)初试EL表达式取long型数值 (2)再探EL表达式取字符串格式long型数值 (3)最后一试---给EL表达式加引号 3.总结 1.引子 在做项目中,发现了一 ...
随机推荐
- 针对后台TCP服务F5健康检查配置
1.TCP-HALF-OPEN方式 TCP-HALF-OPEN的探测方式,实际是F5每隔一个固定的时间,发送一个SYN包给资源池pool中的一个member,等待服务器返回SYN_ACK,在收到SYN ...
- spacemacs怎样配置编辑器显示行号?
spacemacs配置文件.spacemacs文件中查找dotspacemacs-line-numbers. 默认配置为: dotspacemacs-line-numbers nil 修改为(`rel ...
- C++连接Mysql数据库操作
参考文章 http://www.cnblogs.com/justinzhang/archive/2011/09/23/2185963.html 写的很详细 http://blog.csdn.net/j ...
- CTF之文件包含的猥琐思路
From: i春秋 百度杯”CTF 一: <?php include "flag.php"; //包含flag.php这个文件 $a = @$_REQUEST['hello' ...
- python dict conver json
demo: import jsonimport requestsimport xml.etree.ElementTree as et def xmlsjondemo(): data={'statusc ...
- with open
再考虑一个场景,要读取文件内容,并把年龄和名字的顺序交换存成新文件age_name.txt,这时可以同时打开两个文件:with open('name_age.txt', 'r') as fread, ...
- java jar包与配置文件的写法
一个普通的java project,里面引用了config.properties配置文件,将项目打成Runnable jar,然后将config.properties放到打包后的jar路径下,执行该j ...
- spark streaming checkpoint
Checkpoint机制 通过前期对Spark Streaming的理解,我们知道,Spark Streaming应用程序如果不手动停止,则将一直运行下去,在实际中应用程序一般是24小时*7天不间断运 ...
- Class类文件结构
平台无关性 Java是与平台无关的语言,这得益于Java源代码编译后生成的存储字节码的文件,即Class文件,以及Java虚拟机的实现.不仅使用Java编译器可以把Java代码编译成存储字节码的Cla ...
- EF code First数据迁移学习笔记
准备工作 1.新建一个控制台项目, 在"程序包管理控制台"执行 Install-package EntityFramework //安装EF环境 2.在项目下新建类(Paper) ...