背景
在我們日常開發(fā)中研侣，經常會效仿某些流行APP渲染動畫效果谱邪，用來滿足自己開發(fā)或公司開發(fā)的日常需要，學習一下新的東西還是好的庶诡，本案例是 仿IOS 手勢拖拽右滑?關閉當前頁面并返回主頁的一個案例
預覽效果
實現(xiàn)方案
基于H5+方案
說明：本示例是基于HBuilderX 構建的 5 + App模板僅僅用于測試惦银，當然大家可以用Vue 腳手架 或者其他的腳手架 構建 都可以。
第一步末誓、創(chuàng)建項目命名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具體的代碼實現(xiàn)
<!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();//監(jiān)聽當前側滑窗口的右滑ws.drag({direction: 'right',moveMode: 'followFinger'}, {view: plus.runtime.appid,moveMode: 'silent'}, function(e) {if (e.type == 'end' && e.result) {console.log('程序執(zhí)行到這里已經返回到目標窗口了');}});}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);//監(jiān)聽當前側滑窗口的右滑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('程序執(zhí)行到這里已經返回到目標窗口了');//關閉遮罩層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.WebviewDragOptions?? WebviewDragOtherViewOptions：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 事件回調函數(shù) */? /* 還可以做其他額事情 看自己喲 */??/*?顯示遮罩層??? https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStylesmask: (String 類型 )窗口的遮罩用于設置Webview窗口的遮罩層樣式，遮罩層會覆蓋Webview中所有內容秀睛，包括子webview尔当，并且截獲webview的所有觸屏事件，此時Webview窗口的點擊操作會觸發(fā)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('程序執(zhí)行到這里已經返回到目標窗口了');//關閉遮罩層homeWs.setStyle({mask:'none'});????mui.back();//關閉當前頁面?關閉webview?防止第二次openWindow()打不開}});
基于H5+方案——可能遇到的問題
增加遮罩層的問題替饿，上面已經提過優(yōu)化代碼了，這里不在詳細說明贸典，只是備注
列表點擊第一次是可以打開頁面视卢，第二次沒有打開頁面，解決方案如下：
a.僅僅是為了測試效果廊驼，截取了index.html中點擊觸發(fā)函數(shù)代碼
//主列表點擊事件mui('#list').on('tap', 'a', function() {var href = this.getAttribute('href');//中間dde 省略/*增加如下代碼据过，每次點擊都生成webview，options.createNew = trueuni-app 官方解答社區(qū)：https://ask.dcloud.net.cn/question/6514mui 官方文檔：https://dev.dcloud.net.cn/mui/window/#openwindow上面兩個文檔詳細的介紹了關于openWindow的使用方式以及webview創(chuàng)建的最佳方式妒挎，本示例绳锅，僅僅是為了演示效果*/options.createNew = true,??????????//打開新窗口??????????mui.openWindow(href,id,options);});
??????? b.就是根據(jù)官方說的自定義事件來處理或者是在返回頁面時直接mui.back()，代碼如下：
mui.back();//關閉當前頁面 關閉webview 防止第二次openWindow()打不開以上就是H5+ app 仿IOS 實現(xiàn) 安卓手機拖拽效果酝掩，示例代碼都已經標明
基于uni-app 實現(xiàn)方案
這個估計是大家最常用的了鳞芙，項目的基本搭建過程就忽略了，主要核心代碼跟H5+類似期虾，其他頁面棧數(shù)據(jù)獲取的稍有不同原朝，這里直接上代碼：
//?在頁面的?onLoad?生命周期?中進行處理onLoad() {//獲取頁面棧 所有頁面窗口let pages = getCurrentPages();// 獲取首頁webview對象，頁面棧數(shù)組第一個元素為首頁頁面對象let homePage = pages[0];let hometWs = homePage.$getAppWebview();//獲取當前頁面窗口webview對象 頁面棧數(shù)組第二個元素為當前頁面對象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
最后
以上就是今天分享的內容镶苞，干貨滿滿喳坠，希望對大家有幫助。示例代碼基本上都貼出來了茂蚓，如果需要源代碼的請公眾號留言
點擊下方卡片/微信搜索壕鹉，關注公眾號“天宇文創(chuàng)意樂派”(ID:gh_cc865e4c536b)
聽說點贊和關注本號的都找到漂亮的小姐姐了喲且年后必入百萬呀！聋涨！
本文使用 文章同步助手 同步
