APICloud开发之新手上路！原生js简单实现滑动返回

最新推荐文章于 2022-09-01 18:46:53 发布

Talent＇

最新推荐文章于 2022-09-01 18:46:53 发布

阅读量689

点赞数

分类专栏： APICloud 文章标签： APICloud js滑动返回

本文链接：https://blog.csdn.net/qq_44419884/article/details/97392591

版权

APICloud 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

因为Android不支持openWin中的slidBackEnabled：
类型：布尔
默认值：true
描述：（可选项）是否支持滑动返回。iOS7.0及以上系统中，在新打开的页面中向右滑动，可以返回到上一个页面，该字段只 iOS 有效;

所以利用touchstart、touchend事件捕捉用户手势，比较单纯，有更好办法的同志希望能留言指导指导，小生在此谢过！
我的代码：

document.addEventListener('touchstart',function(e){
  _location.startX = e.clientX || e.targetTouches[0].clientX
  _location.startY = e.clientY || e.targetTouches[0].clientY
});
document.addEventListener('touchend',function(e){
  _location.endX = e.clientX || e.changedTouches[0].clientX;
  _location.endY = e.clientY || e.changedTouches[0].clientY;
  if(Math.abs(_location.endY - _location.startY)<= 60 && _location.endX-_location.startX >= 45){     //判断条件  左右滑动距离大于60，上下小于45
    if(_location.startX > 15) return;     //判断条件  开始滑动点击范围距离左边大于15就取消
        var flag = false;
        switch (api.frameName) {   // 判断是否为首页，首页不需要滑动返回
          case 'me-index-frame':
              flag = true;
              break;
          case 'home-index-frame':
                flag = true;
                break;
          case 'college-index-frame':
                flag = true;
                break;
          case 'task-index-frame':
                flag = true;
                break;
          case 'forum-index-frame':
                flag = true;
                break;
          default:
                flag = false;
                break;
        };
        if(flag) return;

        window.leftBtnTap && window.leftBtnTap();   // 返回事件
  }
  _location = {};
})

感谢你的关注！