在 vue 中实现移动端拖拽浮窗滑动效果

Vue 2月前 102

随着移动端应用的普及，浮窗滑动效果成为了移动端设计中越来越常见的一种交互方式。在 vue 中，我们可以使用一些插件或自己编写代码来实现这种效果。

一、使用第三方插件

vue-draggable

vue-draggable 是一个基于 Vue.js 的拖拽组件库，它提供了一些常见的拖拽效果，包括拖拽排序、拖拽复制、拖拽删除等。我们可以使用它来实现移动端浮窗的拖拽效果。

首先，我们需要引入 vue-draggable 的依赖：

npm install vuedraggable --save

然后，在需要使用拖拽效果的组件中，引入并注册 vue-draggable：

import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
        { id: 4, name: 'item 4' },
        { id: 5, name: 'item 5' }
      ]
    }
  }
}

接着，在模板中使用 draggable 组件来展示拖拽效果：

<template>
  <draggable v-model="items">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </draggable>
</template>

这样，我们就可以在移动端实现浮窗的拖拽效果了。

vue-touch-ripple

vue-touch-ripple 是一个基于 Vue.js 的触摸波纹效果插件，它可以给任何元素添加触摸波纹效果。我们可以使用它来实现移动端浮窗的滑动效果。

首先，我们需要引入 vue-touch-ripple 的依赖：

npm install vue-touch-ripple --save

然后，在需要使用触摸波纹效果的组件中，引入并注册 vue-touch-ripple：

import VueTouchRipple from 'vue-touch-ripple'

export default {
  directives: {
    'ripple': VueTouchRipple.directive
  }
}

接着，在模板中使用 ripple 指令来展示触摸波纹效果：

<template>
  <div v-ripple>Content</div>
</template>

这样，我们就可以在移动端实现浮窗的滑动效果了。

二、自己编写代码

如果我们不想使用第三方插件，也可以自己编写代码来实现移动端浮窗的拖拽和滑动效果。

实现浮窗的拖拽效果

首先，我们需要在浮窗组件的模板中添加 touchstart、touchmove 和 touchend 事件：

<template>
  <div class="float-window"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
  >
    Content
  </div>
</template>

接着，在组件的 script 中定义 onTouchStart、onTouchMove 和 onTouchEnd 三个方法：

export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      left: 0,
      top: 0
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.offsetX = this.left
      this.offsetY = this.top
    },
    onTouchMove(e) {
      const x = e.touches[0].clientX - this.startX + this.offsetX
      const y = e.touches[0].clientY - this.startY + this.offsetY
      const maxX = window.innerWidth - this.$refs.floatWindow.offsetWidth
      const maxY = window.innerHeight - this.$refs.floatWindow.offsetHeight
      this.left = x < 0 ? 0 : (x > maxX ? maxX : x)
      this.top = y < 0 ? 0 : (y > maxY ? maxY : y)
    },
    onTouchEnd(e) {
      // do nothing
    }
  }
}

在 onTouchStart 方法中，我们记录下触摸起始点的位置和浮窗的偏移量。在 onTouchMove 方法中，我们根据触摸移动的距离和浮窗的偏移量计算出浮窗的新位置，并限制浮窗的移动范围。在 onTouchEnd 方法中，我们暂时不做任何操作。

最后，在组件的 style 中定义浮窗的位置：

<style scoped>
.float-window {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
}
</style>

这样，我们就可以在移动端实现浮窗的拖拽效果了。

实现浮窗的滑动效果

接着，我们需要在浮窗组件的模板中添加 touchstart、touchmove 和 touchend 事件：

<template>
  <div class="float-window"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
  >
    Content
  </div>
</template>

接着，在组件的 script 中定义 onTouchStart、onTouchMove 和 onTouchEnd 三个方法：

export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      left: 0,
      top: 0,
      isScrolling: false
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.offsetX = this.left
      this.offsetY = this.top
      this.isScrolling = false
    },
    onTouchMove(e) {
      const x = e.touches[0].clientX - this.startX + this.offsetX
      const y = e.touches[0].clientY - this.startY + this.offsetY
      const maxX = window.innerWidth - this.$refs.floatWindow.offsetWidth
      const maxY = window.innerHeight - this.$refs.floatWindow.offsetHeight
      this.left = x < 0 ? 0 : (x > maxX ? maxX : x)
      this.top = y < 0 ? 0 : (y > maxY ? maxY : y)
      if (Math.abs(e.touches[0].clientX - this.startX) > 5 || Math.abs(e.touches[0].clientY - this.startY) > 5) {
        this.isScrolling = true
      }
    },
    onTouchEnd(e) {
      if (!this.isScrolling) {
        if (e.changedTouches[0].clientX < window.innerWidth / 2) {
          this.left = 0
        } else {
          this.left = window.innerWidth - this.$refs.floatWindow.offsetWidth
        }
      }
    }
  }
}

在 onTouchStart 方法中，我们记录下触摸起始点的位置和浮窗的偏移量，并设置 isScrolling 标志位为 false。在 onTouchMove 方法中，我们根据触摸移动的距离和浮窗的偏移量计算出浮窗的新位置，并限制浮窗的移动范围。同时，如果触摸移动的距离超过了 5px，我们设置 isScrolling 标志位为 true。在 onTouchEnd 方法中，如果 isScrolling 标志位为 false，说明触摸是滑动而不是拖拽，我们就根据触摸结束的位置来设置浮窗的位置。

最后，在组件的 style 中定义浮窗的位置：

<style scoped>
.float-window {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  transition: left 0.3s ease-out;
}
</style>

这样，我们就可以在移动端实现浮窗的滑动效果了。

举例说明

假设我们需要在移动端实现一个浮窗组件，它可以拖拽和滑动。我们可以先编写一个 FloatWindow 组件：

<template>
  <div class="float-window"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
       ref="floatWindow"
       :style="{left: left + 'px', top: top + 'px'}"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      offsetX: 0,
      offsetY: 0,
      left: 0,
      top: 0,
      isScrolling: false
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.offsetX = this.left
      this.offsetY = this.top
      this.isScrolling = false
    },
    onTouchMove(e) {
      const x = e.touches[0].clientX - this.startX + this.offsetX
      const y = e.touches[0].clientY - this.startY + this.offsetY
      const maxX = window.innerWidth - this.$refs.floatWindow.offsetWidth
      const maxY = window.innerHeight - this.$refs.floatWindow.offsetHeight
      this.left = x < 0 ? 0 : (x > maxX ? maxX : x)
      this.top = y < 0 ? 0 : (y > maxY ? maxY : y)
      if (Math.abs(e.touches[0].clientX - this.startX) > 5 || Math.abs(e.touches[0].clientY - this.startY) > 5) {
        this.isScrolling = true
      }
    },
    onTouchEnd(e) {
      if (!this.isScrolling) {
        if (e.changedTouches[0].clientX < window.innerWidth / 2) {
          this.left = 0
        } else {
          this.left = window.innerWidth - this.$refs.floatWindow.offsetWidth
        }
      }
    }
  }
}
</script>

<style scoped>
.float-window {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  transition: left 0.3s ease-out;
}
</style>

然后，我们可以在父组件中引入 FloatWindow 组件并使用它：

<template>
  <div>
    <float-window>
      浮窗内容
    </float-window>
  </div>
</template>

<script>
import FloatWindow from './FloatWindow.vue'

export default {
  components: {
    FloatWindow
  }
}
</script>