uni-app、H5+ 仿IOS 实现 安卓手势拖拽右滑关闭当前页面并返回上级页面 + 阴影效果（侧滑返回）

背景

在我们日常开发中，经常会效仿某些流行APP渲染动画效果，用来满足自己开发或公司开发的日常需要，学习一下新的东西还是好的，本案例是 仿IOS 手势拖拽右滑 关闭当前页面并返回主页的一个案例

预览效果

新增资讯效果演示-1

实战App演示

基于un-app、H5+相关Api 仿制的效果

实现方案

基于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具体的代码实现

  
    
    
    
    
    
  

  
    
    

      
      webview-drag 演示示例
    
    
      
        右侧滑动试试看
      
        

  

这个时候就会有人问，如何在目标窗口（父级窗口）加一个遮罩层呀

新增加遮罩层代码如下：

  
    
    
    
    
    
  

  
    
    

      
      webview-drag 演示示例
    
    
      
        右侧滑动试试看
      
    
  

修改后的效果图

分析代码：

/*
 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.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({ /* 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.WebviewStyles
      mask: (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 = true
             uni-app 官方解答社区：https://ask.dcloud.net.cn/question/6514
             mui 官方文档：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'});
        }
      })
},

实战App演示

参考如下文档：

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)

听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！