解决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.引子 在做项目中,发现了一 ...
随机推荐
- Spring Batch中job的启动,停止,放弃操作
1,启动一个job 运行一个批处理任务至少有两点要求:一个 JobLauncher 和一个用来运行的 job .它们都包含了相同或是不同的 context .举例来说,从命令行来启动job,会为每一个 ...
- 网络构建入门技术(3)——IP地址分类
说明(2017-5-16 09:48:08): 1. IP地址
- jieba user guide
import sysimport jiebaimport jieba.analyseimport jieba.posseg as posg sentence=u'''深圳新闻网讯 10月30日,世界城 ...
- 最美应用API接口分析
最美应用API接口分析html, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirror-scr ...
- Beans
PHP之所以被人称为"世界上最好的语言",很大程度上是因为学会语法后就可以直接运用其开发Web应用了吧,而Java基本上不可能.在Java的语言特性的背后,还拖着由Sun公司和社区 ...
- 如何安装docker-compose
docker-compose还是挺好用的~~~~~ 这里简单介绍下两种安装docker-compose的方式,第一种方式相对简单,但是由于网络问题,常常安装不上,并且经常会断开,第二种方式略微麻烦,但 ...
- jquery 中 $ 符的意义
$()就是一个函数名,别把它想得这么神奇.$就是一个字符,比如function a(){};function $(){};是一样的.只是jquery中习惯用$函数来作为对象化的入口而已.你也可以把jq ...
- java json转换
https://blog.csdn.net/WillJGL/article/details/77866224 SpringBoot中如果需要实现json的序列化和反序列化,我们会使用json解析工具. ...
- Spring Cloud Eureka 注册中心 服务消费者 服务提供者之间的关系以及高可用之间的联系
注册中心:提供服务的注册与查询(发现) 服务提供者:服务的提供方,提供服务的一方. 服务消费者:服务的消费方,使用服务的一方. 我们没有注册中心,服务提供者与服务消费者同样可以调用,通过spring中 ...
- JavaScript: The Good Parts
Chapter 1 Good Parts: JavaScript is an important language because it is the language of the web brow ...