background

In our daily development, we often imitate some popular APP rendering animation effects to meet the daily needs of our own development or the development of the company. It is good to learn something new. This case is a case of imitating IOS gesture drag and right slide to close the current page and return to the home page

preview

Expectations: www.bilibili.com/video/bv1hu…

Practical: www.bilibili.com/video/bv1a3…

Implementation scheme

Based on H5+ scheme

Note: This example is a 5 + App template built based on HBuilderX for testing purposes only, of course you can use Vue scaffolding or other scaffolding to build.

Step 1: Create a project named Hello-mui-example

Step 2: I added a page to the official template for testing, project directory:

hello-mui-example/examples/webview-drag.html

Li link tags have been added to entry index.html

Third, run the HBuilderX built-in browser to see if the project is successfully started

Visit: http://127.0.0.1:9220/hello-mui-example/index.html

Port: 9220 is randomly generated, depending on your machine

Mobile phone access sliding effect (App only, with HBuilderX real machine simulation test)

Step 4, look at the webview-drag.html code implementation

<! 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 / / get the current window ws = plus. Webview. CurrentWebview (); Ws. drag({direction: 'right', moveMode: 'followFinger'}, {view: plus.runtime.appid, moveMode: 'silent'}, function(e) {if (e.type == 'end' &&e.ult) {console.log(' the program has returned to the target window '); }}); } 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 Demo example </h1> </header> <div class="mui-content"> <div Class = "mui - content - padded" > < h2 > right sliding try < / h2 > < / div > < / div > < / body > < / HTML >Copy the code

At this time, someone will ask, how to add a mask layer in the target window (parent window)

The new mask layer code is as follows:

<! 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 / / get the current window ws = plus. Webview. CurrentWebview (); / / get home entrance webview var homeWs = plus. Webview. GetWebviewById (plus. Runtime. Appid); Drag ({direction: 'right', moveMode: 'followFinger'}, {view: homeWs, moveMode: 'silent'}, function (e) {/ / show the mask layer homeWs. SetStyle ({mask: 'rgba (0,0,0,0.5)}); If (e.type == 'end' &&e.ult) {console.log(' the program has returned to the target window by this point '); // Close the mask layer homews.setstyle ({mask:'none'}); mui.back(); // Close the webView to prevent openWindow() from opening again}}); } 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 Demo example </h1> </header> <div class="mui-content"> <div Class = "mui - content - padded" > < h2 > right sliding try < / h2 > < / div > < / div > < / body > < / HTML >Copy the code

Modified renderings

Analysis code:

/* H5+ https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview for the current window * / plus. Webview. CurrentWebview (); /* H5+ https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.getWebviewById if you want to get the application entry page belongs to the Webview window, its identifier for the application of % APPID %, By plus. Runtime. Appid get * / plus in runtime. Appid var homeWs = plus. Webview. GetWebviewById (plus. Runtime. Appid); / * WebviewDragEvent:https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDragEvent WebviewDragOptions: 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({ /* */ direction: 'Right ', moveMode: 'followFinger'}, {/ * WebviewDragOtherViewOptions right after the drag and drop the target window * / view: plus, runtime, appid and moveMode: 'silent' }, Function (e) {/* WebviewDragEvent */ /* Can also do other things to look at yourself */ /* display the mask layer https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles mask: The mask of the window (String type) is used to set the mask layer style of the Webview window. The mask layer will cover all contents of the Webview, including sub-WebViews, and intercept all touch screen events of the Webview. At this time, the click operation of the Webview window will trigger the maskClick event.  The value is a string of characters in rgba format that define a solid color mask layer style, for example, "rgba(0,0,0,0.5)" for black translucency. None ", no mask layer is used; The default value is "None", meaning no mask layer. * / homeWs. SetStyle ({mask: 'rgba (0,0,0,0.5)}); If (e.type == 'end' &&e.ult) {console.log(' the program has returned to the target window by this point '); // Close the mask layer homews.setstyle ({mask:'none'}); mui.back(); // Close the webView to prevent openWindow() from opening again}});Copy the code

Based on H5+ scheme— Possible problems

  1. The problem of adding a mask layer has been mentioned above. The optimization code is not explained in detail here. It is just a remark

  2. Click the list for the first time to open the page, the second time does not open the page, the solution is as follows:

    A. Just to test the effect, the code of click-trigger function in index. HTML is intercepted

Mui ('#list').on('tap', 'a', function() {var href = this.getAttribute('href'); /* Add the following code to generate webView, options.createNew = true uni-app every time you click: https://ask.dcloud.net.cn/question/6514 's official documents: https://dev.dcloud.net.cn/mui/window/#openwindow two documents detailed introduced the way of openWindow and webview, the best way to create this sample, */ options.createNew = true, // Open a new window mui.openWindow(href,id,options); });Copy the code

B. Handle the custom event or return the page to mui.back() with the following code:

mui.back(); Close the webView to prevent openWindow() from failing a second timeCopy the code

The above is the H5+ app imitation IOS to achieve android phone drag effect, sample code has been marked

Implementation scheme based on UNI-APP

The main core code is similar to H5+. Other page stack data acquisition is slightly different. Here is the code directly:

OnLoad () {let pages = getCurrentPages(); Let homePage = pages[0]; let hometWs = homePage.$getAppWebview(); Let page = pages[pages.length-1]; 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)); / / show the mask layer hometWs. SetStyle ({mask: 'rgba (0,0,0,0.5)}); If (e.type == 'end' && e.ult) {// Close the mask layer hometws.setstyle ({mask:'none'}); }})},Copy the code

Demo effect:

www.bilibili.com/video/bv1a3…

Refer to the following documents:

Uni-app Official Documents:

Uniapp. Dcloud. IO/collocation…

H5+

www.html5plus.org/doc/zh\_cn/…

www.html5plus.org/doc/zh\_cn/…

www.html5plus.org/doc/zh\_cn/…

The last

The above is the content to share today, full of dry goods, I hope to help you. Sample code is basically posted, if you need source code, please leave a message on the public account

Click the card below/wechat search, follow the public account “Tianyu Creative Music” (ID: GH_CC865e4C536b)

I heard that praise and attention to this number have found a beautiful little sister yo and after the year will enter a million ah!!