使用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. andorid——自定义seekbar(转)

    xml 新建=>xml=>values <?xml version="1.0" encoding="utf-8"?> <resou ...

  2. jQuery验证控件jquery.validate.js的使用介绍

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  3. Linux Makefile简单模板

    ########################################### #Makefile for simple programs ########################## ...

  4. How to deal with "Could not find component on update server. Contact VMware Support or your system administrator." in Vmware.

    手动将vmware安装目录下的vmtools镜像文件,windows.iso文件放到虚拟机的光区里. 再进入虚拟机的系统,在系统里打开光盘进行安装

  5. Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat 解决办法

    问题描述 安装 Python的MySQL驱动时时出现这个错误: Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat 环境 ...

  6. python3 异步模块asyncio

    yield方法引入, 这里存在的问题是,如果你想创建从0到1,000,000这样一个很大的序列,你不得不创建能容纳1,000,000个整数的列表. 但是当加入了生成器之后,你可以不用创建完整的序列,你 ...

  7. JBMP学习引导

    好文: 偶然机会,认识了工作流系统,并且在www.open-open.com(相当不错的开源项目站点,极力推荐!)上了解了些相当出色的工作流系统,不过呼声最高的应该属JBoss 的JBPM工作流组件了 ...

  8. 【Centos】systemd入门教程

    systemd使用教程 常用指令 运行一个服务: systemctl start <服务名> 关闭一个服务: systemctl stop <服务名> 重启一个服务: syst ...

  9. gcc -lpthread

    转自:http://www.cnblogs.com/suntp/p/6473751.html 如果用gcc编译使用了POSIX thread的程序时,通常需要加额外的选项,以便使用thread-saf ...

  10. Java如何以短格式显示月份?

    在Java中,如何显示短格式的月份名称? 使用DateFormatSymbols().DateFormatSymbols类的getShortMonths()方法,本示例显示了几个月的简写名称. pac ...