解决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.引子 在做项目中,发现了一 ...
随机推荐
- Android开发(十)——像素单位dp、px、pt、sp的比较
dp(dip): device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖 ...
- QT-提示“database not open”
问题现象: 要用QT开发"SQLite"时出现如下提示: QSqlQuery::exec: database not open QSqlDatabase: QSQLITE driv ...
- js使用正则替换掉所有的“”
需求,使用bootstrap 的 summernote上传图片,转换成文件流,上传给后台,上传用json传送,不能有“” content = content.replace(/\"/ig,& ...
- java基础篇---网络编程(TCP程序设计)
TCP程序设计 在Java中使用Socket(即套接字)完成TCP程序的开发,使用此类可以方便的建立可靠地,双向的,持续的,点对点的通讯连接. 在Socket的程序开发中,服务器端使用serverSo ...
- docker探索-swarm搭建docker集群(七)
前言 Swarm 在 Docker 1.12 版本之前属于一个独立的项目,在 Docker 1.12 版本发布之后,该项目合并到了 Docker 中,成为 Docker 的一个子命令,docker s ...
- spark练习题
site1,user1,-- :: site1,user2,-- :: site1,user3,-- :: site1,user3,-- :: site2,user4,-- :: site3,user ...
- TCP 和 UDP 在socket编程中的区别(转)
一.TCP与UDP的区别 基于连接与无连接 对系统资源的要求(TCP较多,UDP少) UDP程序结构较简单 流模式与数据报模式 TCP保证数据正确性,UDP可能丢包 TCP保证数据顺序,UD ...
- 腾讯云CentOS升级JDK1.8
1.查看CentOS自带JDK是否已安装. yum list installed |grep java. 2.卸载原有JDK yum -y remove java-1.5.0-gcj.i686 3.查 ...
- Redis提供的持久化机制(一)
Redis提供的持久化机制 redis是一个内存数据库,也就是说它的所有的数据都是保存在内存中的,而内存中的数据当程序结束时就会消失,所以我们要想办法把内存中的数据写到磁盘中.当程序异常退出或者正常退 ...
- 1.php代码块
一.登录 <form action="index.php?m=admin&c=index&a=login&dosubmit=1" method=&qu ...