frame切换

实现frame间的切换

frame

---

第一步:首先准备好移动端的静态页面

如下所示:(前提是所有涉及到的样式和js部分都要引入到你的页面中)

静态页部分如下

    
    
    
    
    
    
    
    


     

        

            
Item1
            
Item2
            
Item3
            
Item4
        
    
    

    

        

            

                ![](../image/demo4.png)
            
            

                
小东Mamba
                
                    

                        
                    
                
            
        
        

            谁吃过，举个手，偶然公司发现的
        
        

            ![](../image/l2.png)
        
        
小时候办过的奇葩事
        

            

                

                    这在我们仙界叫静心草，生服可以添加800年功力，突破境界的时候用一根可以增加2成几率
                    ，还可以炼制洗髓丹和凝神液，是可遇不可求的圣品仙草，道友你开个价吧，老夫灵石不缺！
                
            
        
        

            
 39
            
 1884
            

                
                2994
                
            
        
    
    

    

        

            

                ![](../image/demo4.png)
            
            

                
小东Mamba
                
                    

                        
                    
                
            
        
        

            谁吃过，举个手，偶然公司发现的
        
        

            ![](../image/l2.png)
        
        
小时候办过的奇葩事
        

            

                

                    这在我们仙界叫静心草，生服可以添加800年功力，突破境界的时候用一根可以增加2成几率
                    ，还可以炼制洗髓丹和凝神液，是可遇不可求的圣品仙草，道友你开个价吧，老夫灵石不缺！
                
            
        
        

            
 39
            
 1884
            

                
                2994
                
            
        
    
    

        

            
            
最右
        
        

            
            
关注
        
        

            
            
消息
        
        

            
            
我的
        
    

第二步:开始写js部分的代码

apiready = function(){ }
这个是必须有的

接下来所有的js代码都要写在这个函数中

apiready = function(){
    var header=$api.byId('header');
    var headerH=$api.offset(header).h;
    var menus=$api.domAll(header, '.aui-tab-item');
    var frames=[];
    for(var i=0; i

到此为止可以实现页面间的手势滑动切换效果

第三步:开始实现状态切换

首先把if---else去掉然后开始操作

 apiready = function(){
    var header=$api.byId('header');
    var headerH=$api.offset(header).h;
    menus=$api.domAll(header, '.aui-tab-item');
    var frames=[];
    for(var i=0; i

此时手势滑动页面,导航部分也会跟着切换

第四步:开始实现点击菜单切换

首先要在tab静态页的部分监听一个onclick事件,调用的函数为setNavMenuIndex() 如果是第一个就是0,以此类推如下所示
事件加在静态部分

        

            
Item1
            
Item2
            
Item3
            
Item4
        

事件加完后如下所示

    

        
Item1
        
Item2
        
Item3
        
Item4
    

第五步:在var menus;的后面定义一下setNavMenuIndex这个函数

然后调用

var menus;
    function fnSetNavMenuIndex(index_) {
        api.setFrameGroupIndex({
            name: 'maingroup',
            index: index_,
            scroll: true
        });
    }

此时已经能够实现点击菜单切换的效果

第六步:优化点击交互响应

默认的webkit浏览器内部对于这个onclick事件都有300ms的延迟,为什么呢,原因是浏览器内部有一个反射符,它要判断你的这次点击是短按还是长按,
得先通过排除法,排除你当前的事件不是一个长按,它采取触发短按.
最好的处理延迟的办法是增加一个tapmode这样一个属性

var menus;
    function fnSetNavMenuIndex(index_) {
        fnSetNavMenuSelected(index_);//先执行此函数
        api.setFrameGroupIndex({
            name: 'maingroup',
            index: index_,
            scroll: true
        });
    }