背景
在我们日常开发中，经常会效仿某些流行APP渲染动画效果，用来满足自己开发或公司开发的日常需要，学习一下新的东西还是好的，本案例是 仿IOS 手势拖拽右滑 关闭当前页面并返回主页的一个案例
预览效果
实现方案
基于H5+方案
说明：本示例是基于HBuilderX 构建的 5 + App模板仅仅用于测试，当然大家可以用Vue 脚手架 或者其他的脚手架 构建 都可以。
第一步、创建项目命名hello-mui-example
第二步、我在官方模板中加入了一个页面用于测试，项目目录：
hello-mui-example/examples/webview-drag.html
入口 index.html 加入了 li 链接标签
第三步、用HBuilderX内置浏览器运行，看项目是否启动成功
访问：http://127.0.0.1:9220/hello-mui-example/index.html
端口：9220是随机生成的，具体看自身机器情况
手机访问滑动效果（仅支持App端，用HBuilderX 真机模拟测试）
第四步、查看webview-drag.html具体的代码实现
<!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 rel="stylesheet" href="../css/mui.min.css"><script src="../js/mui.min.js"></script></head><body><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) {if (e.type == 'end' && e.result) {console.log('程序执行到这里已经返回到目标窗口了');}});}if (window.plus) {plusReady();} else {document.addEventListener("plusready", plusReady, false);}</script><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">webview-drag 演示示例</h1></header><div class="mui-content"><div class="mui-content-padded"><h2>右侧滑动试试看</h2></div></div></body></html>
这个时候就会有人问，如何在目标窗口（父级窗口）加一个遮罩层呀
新增加遮罩层代码如下：
<!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 rel="stylesheet" href="../css/mui.min.css"><script src="../js/mui.min.js"></script></head><body><script type="text/javascript">mui.init();function plusReady() {//获取当前窗口var ws = plus.webview.currentWebview();//获取首页入口webviewvar homeWs = plus.webview.getWebviewById(plus.runtime.appid);//监听当前侧滑窗口的右滑ws.drag({direction: 'right',moveMode: 'followFinger'}, {view: homeWs,moveMode: 'silent'}, function(e) {// 显示遮罩层homeWs.setStyle({mask:'rgba(0,0,0,0.5)'});if (e.type == 'end' && e.result) {console.log('程序执行到这里已经返回到目标窗口了');//关闭遮罩层homeWs.setStyle({mask:'none'});mui.back();//关闭当前页面 关闭webview 防止第二次openWindow()打不开}});}if (window.plus) {plusReady();} else {document.addEventListener("plusready", plusReady, false);}</script><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">webview-drag 演示示例</h1></header><div class="mui-content"><div class="mui-content-padded"><h2>右侧滑动试试看</h2></div></div></body></html>
修改后的效果图
分析代码：
/*H5+文档：https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview获取当前窗口*/plus.webview.currentWebview();/*H5+文档：https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.getWebviewById如果要获取应用入口页面所属的Webview窗口，其标识为应用的%APPID%，可通过plus.runtime.appid获取*/plus.runtime.appidvar homeWs = plus.webview.getWebviewById(plus.runtime.appid);/*WebviewDragEvent：https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDragEventWebviewDragOptions：https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDragOptionsWebviewDragOtherViewOptions：https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDragOtherViewOptions*/ws.drag({ /* WebviewDragOptions 右滑拖拽的当前窗口 */direction: 'right',moveMode: 'followFinger'}, { /* WebviewDragOtherViewOptions 右滑拖拽结束后的目标窗口 */view: plus.runtime.appid,moveMode: 'silent'}, function(e) { /* WebviewDragEvent 事件回调函数 *//* 还可以做其他额事情 看自己哟 *//* 显示遮罩层https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStylesmask: (String 类型 )窗口的遮罩用于设置Webview窗口的遮罩层样式，遮罩层会覆盖Webview中所有内容，包括子webview，并且截获webview的所有触屏事件，此时Webview窗口的点击操作会触发maskClick事件。字符串类型，可取值：rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明；"none"，表示不使用遮罩层；默认值为"none"，即无遮罩层。*/homeWs.setStyle({mask:'rgba(0,0,0,0.5)'});if (e.type == 'end' && e.result) {console.log('程序执行到这里已经返回到目标窗口了');//关闭遮罩层homeWs.setStyle({mask:'none'});mui.back();//关闭当前页面 关闭webview 防止第二次openWindow()打不开}});
基于H5+方案——可能遇到的问题
增加遮罩层的问题，上面已经提过优化代码了，这里不在详细说明，只是备注
列表点击第一次是可以打开页面，第二次没有打开页面，解决方案如下：
a.仅仅是为了测试效果，截取了index.html中点击触发函数代码
//主列表点击事件mui('#list').on('tap', 'a', function() {var href = this.getAttribute('href');//中间dde 省略/*增加如下代码，每次点击都生成webview，options.createNew = trueuni-app 官方解答社区：https://ask.dcloud.net.cn/question/6514mui 官方文档：https://dev.dcloud.net.cn/mui/window/#openwindow上面两个文档详细的介绍了关于openWindow的使用方式以及webview创建的最佳方式，本示例，仅仅是为了演示效果*/options.createNew = true,//打开新窗口mui.openWindow(href,id,options);});
b.就是根据官方说的自定义事件来处理或者是在返回页面时直接mui.back()，代码如下：
mui.back();//关闭当前页面 关闭webview 防止第二次openWindow()打不开以上就是H5+ app 仿IOS 实现 安卓手机拖拽效果，示例代码都已经标明
基于uni-app 实现方案
这个估计是大家最常用的了，项目的基本搭建过程就忽略了，主要核心代码跟H5+类似，其他页面栈数据获取的稍有不同，这里直接上代码：
// 在页面的 onLoad 生命周期 中进行处理onLoad() {//获取页面栈 所有页面窗口let pages = getCurrentPages();// 获取首页webview对象，页面栈数组第一个元素为首页页面对象let homePage = pages[0];let hometWs = homePage.$getAppWebview();//获取当前页面窗口webview对象 页面栈数组第二个元素为当前页面对象let page = pages[pages.length - 1];let ws = page.$getAppWebview();ws.drag({direction: 'right',moveMode: 'followFinger'}, {view: hometWs,moveMode: 'silent'}, function(e) {console.log('Left WebviewDragEvent: ' + JSON.stringify(e));// 显示遮罩层hometWs.setStyle({mask:'rgba(0,0,0,0.5)'});if (e.type == 'end' && e.result) {//关闭遮罩层hometWs.setStyle({mask:'none'});}})},
参考如下文档：
uni-app官方文档：
https://uniapp.dcloud.io/collocation/frame/window?id=getcurrentpages
H5+官方文档：
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDragEvent
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDragOptions
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDragOtherViewOptions
最后
以上就是今天分享的内容，干货满满，希望对大家有帮助。示例代码基本上都贴出来了，如果需要源代码的请公众号留言
点击下方卡片/微信搜索，关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)
听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！
本文使用 文章同步助手 同步
