用 uni-app、H5+，实现 Android 上的 iOS 式拖拽手势右滑关闭当前页面并返回上一页 + 阴影效果

引言

在日常开发中，我们经常需要效仿某些流行的应用程序渲染动画效果，以满足自己或公司的开发需求。学习新知识永远是有益的。本案例将演示如何仿照 iOS 系统的手势拖拽，右滑关闭当前页面并返回主页，同时添加阴影效果，实现侧滑返回功能。

预览效果

在开始之前，我们先来看看最终的效果。当用户在应用程序中向右滑动时，当前页面将以动画的形式从右向左滑出，同时页面左侧会出现阴影效果，当页面完全滑出屏幕时，应用程序将返回上一页。

实现步骤

1. 安装依赖

首先，我们需要安装必要的依赖。

npm install @dcloudio/uni-app-native

2. 配置项目

在项目根目录下的 manifest.json 文件中，添加以下代码：

{
  "uni": {
    "native": {
      "type": "app"
    }
  }
}

3. 创建页面

接下来，我们需要创建一个新的页面来演示这个功能。在项目根目录下新建一个目录，名为 pages，并在其中创建一个新文件，名为 index.vue。

<template>
  <view class="page">
    <view class="content">
      当前页面
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0, // 手势开始时的 X 坐标
      startY: 0, // 手势开始时的 Y 坐标
      isDragging: false // 是否正在拖拽
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.isDragging = true
    },
    onTouchMove(e) {
      if (!this.isDragging) return

      const deltaX = e.touches[0].clientX - this.startX
      const deltaY = e.touches[0].clientY - this.startY

      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX > 0) {
          // 右滑
          this.$refs.page.style.transform = `translateX(${deltaX}px)`
          this.$refs.page.style.boxShadow = `-5px 0 5px rgba(0, 0, 0, 0.2)`
        } else {
          // 左滑
          this.$refs.page.style.transform = `translateX(0px)`
          this.$refs.page.style.boxShadow = `0px 0 0px rgba(0, 0, 0, 0)`
        }
      }
    },
    onTouchEnd(e) {
      this.isDragging = false

      const deltaX = e.changedTouches[0].clientX - this.startX
      if (deltaX > 100) {
        // 右滑超过 100px，关闭页面
        uni.navigateBack()
      } else {
        // 右滑小于 100px，恢复页面
        this.$refs.page.style.transform = `translateX(0px)`
        this.$refs.page.style.boxShadow = `0px 0 0px rgba(0, 0, 0, 0)`
      }
    }
  }
}
</script>

<style>
.page {
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}
</style>

4. 添加样式

在项目根目录下的 app.vue 文件中，添加以下样式：

<style>
.page {
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
</style>

5. 运行项目

现在，我们可以运行项目了。在终端中输入以下命令：

npm run dev

项目将在本地服务器上启动。打开浏览器，访问 http://localhost:8080，即可看到演示页面。

总结

在本教程中，我们向您展示了如何使用 uni-app 和 H5+ 在安卓设备上实现 iOS 式的拖拽手势，右滑关闭当前页面并返回上一页，同时添加阴影效果，实现侧滑返回的功能。我们希望本教程对您有所帮助，如果您有任何问题或建议，欢迎随时提出。