微助科技
微助科技
  • 发布:2017-04-13 21:09
  • 更新:2022-03-01 18:38
  • 阅读:3240

安卓也可以侧滑返回webview窗口

分类:HBuilder

给需要侧滑返回的页面加这些

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  

            function plusReady() {  
                //获取当前窗口  
                var ws = plus.webview.currentWebview();  
                //监听当前侧滑窗口的右滑  
                ws.drag({  
                    direction: 'right',  
                    moveMode: 'followFinger'  
                }, {  
                    view: plus.runtime.appid,  
                    moveMode: 'silent'  
                }, function(e) {  
                //滑动到end执行mui.back()事件  
                    if(e.type == 'end' && e.result) {  
                        mui.back();  
                    }  
                });  
            }  
            if(window.plus) {  
                plusReady();  
            } else {  
                document.addEventListener("plusready", plusReady, false);  
            }  
        </script>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">窗口侧滑关闭</h1>  
        </header>  
    </body>  

</html>
3 关注 分享
菜鸡 地表荣耀 e***@163.com

要回复文章请先登录注册

tuonioooo

tuonioooo

这里是一个完整的解决方案 包括 阴影效果 涵盖 uni-app 和 H5+ 两种实现方式 任你选

https://blog.csdn.net/tuoni123/article/details/123212106
2022-03-01 18:38
tuonioooo

tuonioooo

回复 e***@163.com :
这里是一个完整的解决方案 包括 你要的阴影
https://blog.csdn.net/tuoni123/article/details/123212106
2022-03-01 18:38
e***@163.com

e***@163.com

没有阴影效果啊,有办法了吗?
2019-01-17 17:45
s***@163.com

s***@163.com

是啊,没有阴影效果
2018-11-07 21:31
么也不说了

么也不说了

回复 e***@163.com :
没有阴影效果啊
2018-11-07 18:34
2***@qq.com

2***@qq.com

这样能返回,为什么第二次再点击就不会跳到这个页面了,而是又滑一下自动返回
2018-01-19 11:11
e***@163.com

e***@163.com

补充一下:
mui.openWindow({
id: 'detail.html',
url: 'detail.html',
styles: {
top: '0',
bottom: '0',
background:"transparent"
}
});
可以在打开的子窗口之前设置子窗口webveiw的背景样式backgound:"transparent";这样就可以实现和ios一样的侧换关闭的效果了
2017-04-18 10:39