漠
  • 发布:2017-12-01 23:11
  • 更新:2017-12-01 23:11
  • 阅读:2537

html5+ 手势滑动 更改窗口

分类:HTML5+

一个非常常用的方法,手势滑动控制窗口改变。
可以在不引入mui等其他插件的情况下,单独使用
可以改变底部选项卡,
也可以用来手势关闭单页面
第一次发分享,好激动…………

//因为手机性能的问题,绑定事件,可能会发生在创建的窗口之前,
//我的做法是,使用setTimeout,使他延迟绑定
//创建窗口的部分省略……,想看创建窗口部分代码的人,留言/评论

function move (webviewID,dom,classname){  
      /*    

     *  第一个参数为webview的id数组,  
     *   
     *  第二个参数为需要改变的导航,获取好的dom数组  
     *   
     *  第三个需要改变的classname  
     *   
     *  如果只有一个参数,代表关闭当前窗口,  
     * 请传入窗口id  
     *   
     * */  
var i;  
    if(arguments.length>1){  
        for(i=0; i<webviewID.length ; i++){  
            if(i+1 < webviewID.length){  
                mov(get(webviewID[i]),get(webviewID[i+1]),dom[i],dom[i+1],"rtl");                 
            }  
            if(i-1 >= 0){  
                mov(get(webviewID[i]),get(webviewID[i-1]),dom[i],dom[i-1],"ltr")                  
            }  
        }  
    }else {  
        get(webviewID).drag(  
            {direction:"ltr",moveMode:"followFinger"},  
            {moveMode:"follow"},  
            function(e){  
                if(e.result){  
                    get(webviewID).back();  
                }  
            }  
        )  
    }  

    function get (d){  
        return plus.webview.getWebviewById(d);  
    }  
    function mov(w, w1, d, d1, s) {  
        w.drag({  
                direction: s,  
                moveMode: "followFinger"  
            }, {  
                view: w1,  
                moveMode: "follow"  
            },  
            function(e) {  
                if(e.result == true) {  
                    d.classList.remove(classname);  
                    d1.classList.add(classname);  
                }  
            }  
        )  
    }  
}
0 关注 分享

要回复文章请先登录注册